JSFiddle - React, Tailwind, and code Playground

HTML

<div style="border:1px blue solid;width:100%;"><div class="progress0"></div></div>
<button id="start">
Start
</button>

CSS

.progress0{height:20px;margin:10px 0 0:display:none;width:0;background-color: blue;transition: width 100ms linear;}

JavaScript

var arr = [];
for (var i = 0; i <= 50; i++) {
    arr.push(i);
};
$('#start').on("click",function(){
var str = '';

(function next(i){
    $.ajax({
        type: 'GET',
        url: '/echo/html/',
        data: {html:arr[i], delay:1},
        //async: false,
        complete: function () {
   			 $(".progress0").css("width",i*2+'%');
         if(arr.length > i+1) next(i+1);
        }
    });
})(0)

});