how to create a jQuery loading bar? (like the ones used on flash sites)

Question

I have multiple elements I need to load before the user has control over the page (mostly images, videos, and audio). Currently, I\'m loading them with the $.when() function

Answer 1

You can use the Progress Bar from jQuery UI

Upon loading of each element simply change the value of the progress bar.

$.when($.ajax("video1.ogv"))
.then(function () {
    videoLoaded[1] = true;
    updateProgressBar();
});

$.when($.ajax("video2.ogv"))
.then(function () {
    videoLoaded[2] = true;
    updateProgressBar();
});

$.when($.ajax("video3.ogv"))
.then(function () {
    videoLoaded[3] = true;
    updateProgressBar();
});

var updateProgressBar = function() {
    // iterate though the videoLoaded array and find the percentage of completed tasks
    $("#progressbar").progressbar("value", percentage);
}

Answer 2

With jQuery-ui it shouldn't be that difficult. If you know the total number of elements you have to wait for, you can just create it and update the progress bar: http://jsfiddle.net/melachel/4mh7Q/

Answer 3

The jQueryUI Progressbar is a powerful API to create custom loading bars. You can couple that with the jQuery Deferred API to do something like

var ProgressBar = {
    advance : function(percent){
        return $.Deferred(function(dfr){
            $(‘.progressbar’).animate({width:percent + ‘%’}, dfr.resolve);
        }).promise();
    }
};

ProgressBar.advance(86).then(function(){
    //do something neat
});

(via http://www.decipherinc.com/n/blog/development-and-engineering-team/2011/06/working-jquery-s-deferred-0)