javascript - 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, like this:

//all elements are hidden, except for a black background and
//a "loading" gif in the middle.

$.when($.ajax("video1.ogv"), $.ajax("video2.ogv"), $.ajax("videoN.ogv"))
.then(function () {
   //show the site with all the content preloaded...
});

Is there any way to create a loading bar that shows the progress (in percentage) of all the elements loading in the background? Like what happens in most flash sites with heavy media, for example: http://www.saizenmedia.com/nightwishsite/

Can it be done purely with jQuery or Javascript?

Thanks in advance!

Answer 1

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)