increment progressbar every x seconds

Question

I basically need a jQuery UI progress bar to increment x amount every x seconds. After it reaches 100% it needs to run a function to get some content.

Basically a timer.

EDIT: I don't need code to fetch content. I already have that.

Answer 1

var progressBar = $('#progress-bar'),
    width = 0;

progressBar.width(width);

var interval = setInterval(function() {

    width += 10;

    progressBar.css('width', width + '%');

    if (width >= 100) {
        clearInterval(interval);
    }
}, 1000);

jsFiddle .

Answer 2

Assuming that you're using the jQueryUI progressbar :

var tick_interval = 1;
var tick_increment = 10;
var tick_function = function() {
    var value = $("#progressbar").progressbar("option", "value");
    value += tick_increment;
    $("#progressbar").progressbar("option", "value", value);
    if (value < 100) {
        window.setTimeout(tick_function, tick_interval * 1000);
    } else {
        alert("Done");
    }
};
window.setTimeout(tick_function, tick_interval * 1000);

Demo here

Answer 3

jQuery UI has a progress bar widget . You can set its value inside setInterval . Run clearInterval when complete event is raised.