Main menu

Simple Progress (Load) Bar with jQuery

Feb

13

2010

2

By David Luhman

Let's say you need to load some info into a page, but the info requires some time to process. You don't want to have the user staring at a blank screen during the processing, so first load the page with a busy (progress) bar image and then replace the image with the actual data when ready.

The above jQuery is pretty simple. Initially, the page loads with with the two progress bar images spinning. After the document loads, jQuery starts up, and the content in divs one and two are replaced by the simple content from one.php and two.php. The PHP scripts just sleep a random amount to replicate processing.

After the PHP scripts are done, the content is returned (via jQuery's load function) to the page, replacing the original progress bar images.