It’s easy to make a simple progress bar like this one. It looks smooth enough: https://jsfiddle.net/H4SCr/
—
Also shown below:
var d = document.getElementById('child');
function run(div,i){
i += 1;
div.style.width = i+'px';
if(i > 200) i = 200;
div._timer = setTimeout(function () {
run(div,i)
},100);
}
run (d,0);
#bar{
width:200px;
height:20px;
background-color:black;
position:relative;
}
#child{
position:abosoute;
top:0px;
left:0px;
background-color:red;
height:20px;
}
<div id="bar">
<div id="child"></div>
</div>
However, in the example, it’s only smooth because I’m incrementing by one. If I chose to increment by 50 or 30, it is really choppy and doesn’t look smooth.
I’m recieving the progress amount from a third party API, so this is how the progress will look as I recieve the data:
5%, 23%, 72%, 77%, and 100%
Instead of incrementing the progress bar by 1, I have 5 different progress statuses. How do I make large increments and still make it look smooth?