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?