Es fácil hacer una barra de progreso simple como esta. Se ve lo suficientemente suave: https://jsfiddle.net/H4SCr/

--- También se muestra a continuación:

 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>

Sin embargo, en el ejemplo, solo es suave porque estoy incrementando en uno. Si elijo incrementar en 50 o 30, es muy entrecortado y no se ve suave. Estoy recibiendo la cantidad de progreso de una API de terceros, así es como se verá el progreso cuando reciba los datos: 5 %, 23 %, 72 %, 77 % y 100 %

En lugar de incrementar la barra de progreso en 1, tengo 5 estados de progreso diferentes. ¿Cómo hago incrementos grandes y todavía hago que se vea suave?