JSFiddle - React, Tailwind, and code Playground

by Nimeshka Srimal

HTML

<span id="progressMsg"></span>
<input type="hidden" id="progressMsgNumber">
<div class="pogress progress-info slim" id="progressBar" style="width=1%"></div>

JavaScript

setTimeout(progressBar, 1000);
setTimeout(progressMsg, 1000);

function progressBar() {
    barWidth = document.getElementById("progressBar").style.width.slice(0, -1); //to get number without "%" char
    if (barWidth >=100) {
        // We are done
    } else {
        minRand = 1;
        maxRand = 5;
        randSeconds = Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand;
        barWidth = Number(barWidth)+randSeconds;
        document.getElementById("progressBar").style.width = barWidth+"%";
        setTimeout(progressBar, randSeconds*1000);
    }

}

function progressMsg() {
    msgList = new Array ("Msg1", "Msg2", "Msg11");
    barWidth = document.getElementById("progressBar").style.width.slice(0, -1);
    if (barWidth >=100) {
        // We are done
    } else {
        msgNumber = document.getElementById("progressMsgNumber").val;
        msgNumber++;
        document.getElementById("progressMsg").innerHTML = msgList[msgNumber];
        document.getElementById("progressMsgNumber").val = msgNumber;
        minRand = 1;
        maxRand = 5;
        randSeconds = Math.floor(Math.random() * (maxRand - minRand + 1)) + minRand;
        setTimeout(progressMsg, randSeconds*1000);
    }

}