Progressbar's Progress Not Updating When Inside A Loop

for (var i = 0; i < dataArray.length; i++) { if(((i/dataArray.length)*100)%10 == 0) $('#progressbar').progressbar({ value: (i / dataArray.length) * 100 });

Solution 1:

You can use this, just a bit optimized from your code:

prog_bar = $("#progressbar");
for (var i = 0; i < dataArray.length; i++) {
        if(i%100 == 0)
        prog_bar.progressbar({ value: (i / dataArray.length) * 100 });
        //other code..
}

Will you use a for loop? there is nothing "pausing" this loop so it will run very fast and you might just see it at 100%, instead of growing.

Demo here

You could instead call a function (instead of a for loop) to update the progress bar, as your "other code" is running:

var i = 0;
function update_progress_bar() {
    if (i % 100 == 0) {
        prog_bar.progressbar({
            value: (i / 10000) * 100
        });
    }
    i++;
}

Something like this fiddle