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

I would do it like that for a dummy progressbar :

Html

<div id="progress">
    <span class="progress-text"></span>
    <div class="progress-bar"></div>
</div>

Css

#progress {
    position:relative;
    width:250px;
    height:20px;
    border:1px solid red;
}

#progress .progress-bar {
    background:blue;
    height:20px;
    width:0%;
    display:inline-block;
}

#progress .progress-text {
    position:absolute;
    z-index:2;
    right:0;
}

JQuery

$(document).ready(function() {
    var progression = 0,
    progress = setInterval(function() 
    {
        $('#progress .progress-text').text(progression + '%');
        $('#progress .progress-bar').css({'width':progression+'%'});
        if(progression == 100) {
            clearInterval(progress);
            alert('done');
        } else
            progression += 10;

    }, 1000);
});

jsFiddle

You could use the JQueryUI Progressbar too !