Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

increment progressbar every x seconds

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.

like image 746
Mythrillic Avatar asked Oct 05 '11 06:10

Mythrillic


2 Answers

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.

like image 166
alex Avatar answered Nov 09 '22 15:11

alex


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

like image 26
Salman A Avatar answered Nov 09 '22 17:11

Salman A