progress style

HTML

<script src="https://rawgithub.com/LeaVerou/HTML5-Progress-polyfill/master/progress-polyfill.min.js"></script>
<progress max="100" value="80">
    <div class="progress-bar">
        <span style="width: 80%;">Progress: 80%</span>
    </div>
</progress>

SCSS

progress[value]{
 /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  
  /* Get rid of default border in Firefox. */
  border: none;

/* For IE10 */
  color: blue; 
 
display: block;    
position: relative;
width: 100%;
height: 1em;
vertical-align: -.2em;

}

progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
}

progress[value]::-moz-progress-bar { 
  border-radius: 0px; 
  background-color: rgb(251,151,0);
}
.progress-bar {
  background-color: whiteSmoke;
  border-radius: 0px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;

  width: 250px;
  height: 20px;
  
  position: relative;
  display: block;
}
  
.progress-bar > span {
  background-color: blue;
  border-radius: 0px;

  display: block;
  text-indent: -9999px;
}