
$progress-buffer-color: change_color($progress-background-color, $alpha: 0.2);

progress {
  height: $progress-height;
  -webkit-appearance: none;
  border-radius: $border-radius;
  border-radius: $border-radius;

  box-shadow: inset 0 0 0 1px $input-border-color;

  // background-size: 25px $progress-height, 100% 100%, 100% 100%;
  -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage


  background-image: linear-gradient(-45deg, transparent 33%, $progress-buffer-color 33%,
                          $progress-buffer-color 66%, transparent 66%);
  background-size: 25px $progress-height, 100% 100%, 100% 100%;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  border-radius: $border-radius;
  background-image: none;
  background-color: $progress-background-color;
}

progress[value] {
  background-image: none;
  -webkit-animation: none;
}

@-webkit-keyframes animate-stripes {
   100% { background-position: 100px 0px; }
}
