<progress min="0" max="100"></progress>
<progress min="0" max="100" value="15"></progress>
<progress min="0" max="100" value="30" class="progress-success"></progress>
<progress min="0" max="100" value="45" class="progress-info"></progress>
<progress min="0" max="100" value="60" class="progress-primary"></progress>
<progress min="0" max="100" value="75" class="progress-warning"></progress>
<progress min="0" max="100" value="90" class="progress-danger"></progress>

$progress-inner-shadow: 2px 2px 3px rgba(0,0,0,.5) inset;
$progress-border-radius: 3px;
$progress-height: 20px;
$progress-background-color: whitesmoke;
$progress-indeterminate-speed: .5s;
$progress-margin-bottom: 10px;

@mixin progress-style() {
  position: relative;
  display: block;
  width: 100%;
  height: $progress-height;
  border: none;
  background-color: $progress-background-color;
  border-radius: $progress-border-radius;
  box-shadow: $progress-inner-shadow;
  
  /*
  the background-image appears only in
  the indeterminate state, being overridden
  when there's a value in the progress
  */
  background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSdsaWdodGdyYXknIGhlaWdodD0nMjAnIHdpZHRoPSczNScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMCAyMCBMMTcgMCBIMzUgTDE3IDIwIFonLz48L3N2Zz4="); // for browsers that does not support linear-gradient
  background-image: linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%); // for browsers that does not support svg backgrounds
  background-size: 35px $progress-height;
  animation-name: animate-indeterminate;
  animation-duration: $progress-indeterminate-speed;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@mixin progress-color($color) {
  color: $color; // IE progress value color
  &::-webkit-progress-value {
    background-color: $color;
  }
  &::-moz-progress-bar {
    background-color: $color;
  }
}
progress {
  @include progress-style();
  margin-bottom: $progress-margin-bottom;
  
  /*
  for old browsers that does not
  support the progress element at all
  */
  &:before {
    content: ''; // value / max will appear if a value is set
    line-height: $progress-height;
    color: black;
    text-align: center;
    @include progress-style();
  }
  &::-webkit-progress-bar, &::before {
    /*
    Webkit supports ::before on the
    progress, we need to remove it
    */
    display: none;
  }
  
  &::-ms-fill {
    animation-name: none; // remove default dot animation on IE
  }
  &::-webkit-progress-bar, &::after {
    /*
    this creates an animated overlay on webkit
    with progress:after styles here applied to
    ::-webkit-progress-bar will be reset later
    */
    @include progress-style();
    content: '';
    position: absolute;
    top: 0px;
    background-color: transparent;
    box-shadow: none;
  }
  &::-webkit-progress-bar {
    @include progress-style();
    background-image: none;
  }
  &::-moz-progress-bar {
    @include progress-style();
  }
  &[value] {
    background-image: none;
    &:before {
      content: attr(value)' / 'attr(max);
    }
    @include progress-color(gray);
    &::-ms-fill {
      box-shadow: $progress-inner-shadow;
      border: none;
      border-radius: $progress-border-radius;
    }
    &::-webkit-progress-bar, &::after {
      background-image: none;
    }
    &::-webkit-progress-value {
      /*
      the inner shadow applied to the
      progress element and the ::-webkit-progress-bar
      is bellow the ::-webkit-progress-value
      (in other browsers it's above, so no need to set it again)
      */
      box-shadow: $progress-inner-shadow;
      border-radius: $progress-border-radius;
    }
    &::-moz-progress-bar {
      background-image: none;
    }
    &.progress-success {
      @include progress-color(green);
    }
    &.progress-info {
      @include progress-color(lightblue);
    }
    &.progress-primary {
      @include progress-color(blue);
    }
    &.progress-warning {
      @include progress-color(orange);
    }
    &.progress-danger {
      @include progress-color(red);
    }
  }
}
@keyframes animate-indeterminate {
  from { background-position-x: 0px }
  to { background-position-x: 35px }
}

/*
Based on the blog post at 
https://css-tricks.com/html5-progress-element/

That's what I've done:
  - added automatic fallback to browsers that does not support the progress element (https://caniuse.com/#feat=progress)
  - added indeterminated animation support for webkit (with the ::after overlay trick)
  - added svg background fallback to browsers that does not support linear-gradient (https://caniuse.com/#feat=svg-css and https://caniuse.com/#feat=css-gradients)
*/