JS - How to repetativly fire a function at random time for certain period

I would like to imitate progress bar getting random lengh added 0% to 100% with series of messages displayed in certain sequence but also in random time.

In order to do that I'm staring two independent loops using JS setTimeout method with a random number genearted inside of each loop. But each loop not supposed to be longer than 30 seconds and with the way I'm doing I can't control that.

For the second loop I have to fire the function for 11 times randomly but fit that into 30 seconds as well.

The progress bar moves by changing its width. The messages supposed to be right above that. It looks like this:

HTML:

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

JS:

setTimeout(progressBar, 1000);
setTimeout(progressMsn, 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);
    }

}