How to create jQuery loading bar? (for example, those used on flash sites)

Question

I have a few elements that I need to download before the user controls the page (mainly images, video and audio). I am currently loading them using the $ .when () function, for example:

//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 a way to create a loading bar showing the progress (in percent) of all items loaded in the background? For example, what happens on most flash sites with heavy media, for example: http://www.saizenmedia.com/nightwishsite/

Is it possible to do this only with jQuery or Javascript?

Thanks in advance!

Answer 1

You can use the progress bar from the jQuery user interface

When loading each item, simply change 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

jQueryUI Progressbar is a powerful API for creating custom loading bars. You can associate this 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 )

Answer 3

With jQuery-ui, this should not be so complicated. If you know the total number of items that you need to wait for, you can simply create it and update the progress bar: http://jsfiddle.net/melachel/4mh7Q/