IE-friendly progress bar CSS

progress.scss

// super small progress bar styles
// recommended to be used with autoprefixer
// for the sake of consistency

$color: pink;
$whitespaceColor: #ffeeee;

progress {
  appearance: none;
  border: none;
  background-size: auto;
  height: 10px;
  
  // progress bar color for IE
  color: $color;

  &,
  &[aria-valuenow],
  &::-webkit-progress-bar {
    // normalize white space color
    background: $whitespaceColor !important;
  }
  &[aria-valuenow]:before,
  &::-webkit-progress-value {
    background: $color;
  }
  // separate moz styles otherwise bar defaults inherited color
  // on chrome
  &::-moz-progress-bar {
    background: $color;
  }
}