Cross browser progress styling

/*Downloaded from https://www.codeseek.co/ayrtonvwf/cross-browser-progress-styling-JZWENR */
    $progress-inner-shadow: 2px 2px 3px rgba(0,0,0,.5) inset;
$progress-border-radius: 3px;

@mixin progress-style() {
  position: relative;
  background-color: whitesmoke;
  height: 20px;
  border-radius: $progress-border-radius;
  box-shadow: $progress-inner-shadow;
  background-image: linear-gradient(135deg, transparent, transparent 33%, rgba(0,0,0,0.1) 33%, rgba(0,0,0,0.1) 66%, transparent 66%);
  background-size: 35px 20px;
  animation-duration: .5s;
  animation-name: animate-indeterminate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: none;
  width: 100%;
}
@mixin progress-color($color) {
  color: $color;
  &::-webkit-progress-value {
    background-color: $color;
  }
  &::-moz-progress-bar {
    background-color: $color;
  }
}
progress {
  @include progress-style();
  margin-bottom: 10px;
  &::-ms-fill {
    animation-name: none;
  }
  &::-webkit-progress-bar, &::after {
    // this creates an animated overlay on webkit with progress:after
    // styles applied to ::-webkit-progress-bar will be reset later
    @include progress-style();
    content: '';
    height: 100%;
    width: 100%;
    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;
    @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 {
      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 }
}

/*Downloaded from https://www.codeseek.co/ayrtonvwf/cross-browser-progress-styling-JZWENR */