JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress">
  <p>Retrieving data...<strong>0%</strong></p>
    <progress value="5" min="0" max="100"><b>0%</b></progress>
</div>

CSS

html{
  height:100%;
  background:-webkit-linear-gradient(#555,#444);
  background:-moz-linear-gradient(#555,#444);
  background:-o-linear-gradient(#555,#444);
  background:linear-gradient(#555,#444);
  color:#ccc;
  font:.9em sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
#progress{
  width:300px;
  margin:50px auto;
  text-align:center;
}
#progress p{
  font-size:0.75em;
  text-align:left;
    padding: 8px 5px;
    margin:0;
}
progress{
  display:inline-block;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:300px;
  height:20px;
  margin-right:10px;
  border-radius:15px;
  background:#333; 
  background:-webkit-linear-gradient(#2d2d2d,#444);
  background:-moz-linear-gradient(#2d2d2d,#444);
  background:-o-linear-gradient(#2d2d2d,#444);
  background:linear-gradient(#2d2d2d,#444);
  border:none;
  padding:3px 3px 2px 3px;
  border:1px solid rgba(0,0,0,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.2);
  color:#09c;
  font-size:.75em;  
  text-align:left;
  line-height:12px;   
}
progress b{display:block;background:red;border-radius:15px;width:0;}

progress[value^='1'] b{
width:10%;background:green;
}
progress[value^='2'] b{
width:20%;background:blue;
}
progress[value^='3'] b{
width:30%;
}
progress[value^='4'] b{
width:40%;
}
progress[value^='5'] b{
width:50%;
}
progress[value^='6'] b{
width:60%;
}
progress[value^='7'] b{
width:70%;
}
progress[value^='8'] b{
width:80%;
}
progress[value^='9'] b{
width:90%;
}

progress::-moz-progress-bar{
  border-radius:10px;
  background: #09c;
  background: 
    repeating-linear-gradient(
      45deg, 
      rgba(255,255,255,.2) 0,
      rgba(255,255,255,.2) 10px, 
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 20px
    ),
    linear-gradient(
      rgba(255,255,255,.1) 50%,
      rgba(255,255,255,0) 60%
    ),
    #09c;
    background-size:300px 20px,auto,auto;
    background-position:-300px 0,top,top;
    background-position:top right,top,top;
    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0...

JavaScript

$(function() {

    function vdo() {
        var val = $('progress').attr('value');
        if (val >= 100) {
            val = 5;
        }
        var newVal = val * 1 + 0.25;
        var txt = Math.floor(newVal) + '%';

        $('progress').attr('value', newVal);
        $('progress b').text(newVal);
        $('strong').html(txt);
        
        console.log($('progress').attr('value'));
    }

    setInterval(function() {
        vdo();
    }, 40);

    

});