Question

How can I create progress bar similar to gmail? I have a div called display <div id="display"></div> in which the content is fetched from an external page using jquery $('#display').load('somepage.html'); and this part is activated using .click() event. So what I am trying is in the time of fetching something.html to load in ‘display’, how can I add a progress bar to the <div id="display"></div>

Answer 1

I recommend the jQueryUI Progress Bar. They have an animated version that is similar to the styling of the Gmail progress bar. You can use the jQuery Theme Roller to skin it the same way as Gmail.

Unfortunately jQuery.load does not provide you with percentage completed so you can fake the effect of knowing the total percent by slowly animating the progress bar towards completion and when the complete callback is executed on the load then you should complete the progress bar animation. Start the slow animate before calling .load() and ensure you animate slow enough not to finish the fake animation before the page is fully loaded.

There are some alternatives to .load() that you can use. I think in your case you should split the progress into multiple .load() calls and assign arbitrary percentage points to them. For example when the first .load() finishes, move the progress bar to 25%, then 50% for the second content load, etc.