JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar" id="bar1"><div class="child"></div></div>
<div class="clr"></div>
<div class="bar" id="bar2"><div class="child"></div></div>
<div class="clr"></div>
<div class="bar" id="bar3"><div class="child"></div></div>
<div class="clr"></div>
<div class="bar" id="bar4"><div class="child"></div></div>
<div class="clr"></div>
<div class="bar" id="bar5"><div class="child"></div></div>

CSS

.bar{
    width:200px;
    height:20px;
    background-color:black;
    position:relative;
}
.child{
    position:abosoute;
    top:0px;
    left:0px;
    background-color:red;
    height:20px;
}
.clr{
    width:100%;
    height:2px;    
}

JavaScript

// array to maintain progress bars
var pbArr = [{
    pid: 'bar1', // parent container id
    incr: 1 // increment value
}, {
    pid: 'bar2',
    incr: 2
}, {
    pid: 'bar3',
    incr: 3
}, {
    pid: 'bar4',
    incr: 4
}, {
    pid: 'bar5',
    incr: 5
}];

var loopCnt = 1; // loop count to maintain width
var pb_timeout; // progress bar timeout function

// create progress bar funtion

var createPB = function () {

    var is_all_pb_complete = true; // flag to check whether all progress bar are completed executed

    for (var i = 0; i < pbArr.length; i++) {
        var childDiv = document.querySelector('#' + pbArr[i].pid + ' div'); // child div
        var newWidth = loopCnt * pbArr[i].incr; // new width
        if (newWidth <= 100) {
            is_all_pb_complete = false;
            childDiv.style.width = newWidth + '%';
        } else {
            childDiv.style.width = '100%';
        }
    }

    if (is_all_pb_complete) { // if true, then clear timeout
        clearTimeout(pb_timeout);
        return;
    }

    loopCnt++; // increment loop count

    // recall function
    pb_timeout = setTimeout(function () {
        createPB();
    }, 1000);
}

// call function to initiate progress bars
createPB();