javascript - How to change progress bar in loop?

Question

I have html code. And i need some javascript code for update value on every iteration

<progress id="progressBar" max="100" value="0"></progress>


for (i = 0; i <= 100; i ++) {
    //update progress bar
}

I try to do something like this:

var progressBar = document.getElementById("progressBar");
progressBar.value += i;

But this not work. It update progress bar when loop finish.

Answer 1

You need to write an asynchronous loop using setTimeout like this:

var counter = 0;
(function asyncLoop() {

    $('#progressBar').val(counter++);
    if (counter <= 100) {
        setTimeout(asyncLoop, 50);
    }
})();