AJAX: Progress Bar Management

Originally published 

Tue 28 Aug 2012

Editors Notes

The key to effective web design is effective communication between two sets of important parties.  The most important parties are the people your website is trying to reach, and you, the website owner.  There is a separate relationship here though - your website and its readers.  While the website is the tool you use to communicate, the tool is only effective if it communicates well with the readers.  To that end, you'll find a number of tips like the following here that add some minor decoration or indicator to help the reader or application user understand what the application is trying to tell them.

Original Post

Using some form of "working" or "busy" indicator with ajax calls is nice for the user experience. It lets folks know something is happening and can prevent multiple button clicks that otherwise might not be desirable. There are a couple of ways I've handled this need and I like them both for different reasons and situations.

Looping Animated
You can find a number of looped .gif or .swf busy indicators on the web. There's even a website that will generate them for you. I particularly like Ajaxload.info because they provide full control over the appearance and color of the animation and a number of styles to choose from. And it's free!
I like this sort of indicator for predictably quick response times and will insert it at the beginning of an ajax call into an area that is being populated with the ajax data results, and then replace it with the data when done. It give the use a good visual "hint" as to where to look for the action to take place so they aren't hunting around the screen for whatever it was updated when the ajax call completed.
There are times though when a looping animation doesn't convey the right information.

JQuery UI Progress Bar
JQuery UI has a nice progress bar widget that you can theme to an extent by choosing different JQuery UI theme packages. It is pretty basic but can be combined with text to make a very informative feedback point. You can show it, set it's position, and hide it. All you need really.
The way I found most useful to use it helps get around the way ajax calls work. We pretty much fire off the request and wait for a response. We don't know if the server is making any progress. Most of the time it is, but we're left to guess and wait. To help bridge this gap in user feedback, I've started using a setInterval call in Javascript to increment the progress bar 1 tick every 300 ms, and set it to 0 when I get to 100. This way, the progress bar shows when the request is initiated, "runs" while the request is processing at the server, and is stopped when the ajax success method is called.
For the user, this feedback is golden and very communicative. They are not left to wonder if things are hung up or working at all. More elaborate processes that involve many ajax calls can instead set relative positions on the progress bar as results are returned (in a non synchronous series) when appropriate and I've used this as well. Both approaches help tell the most important story: "things are happening in response to your mouse click".

Here's some sample Javascript.

// some functions for shortcutting calls to the progress bar - all require jquery


function pset(val){
 $('#progressbar').show();
 $('#progressbar').progressbar({value:val}); 
}

function pshow(){
 $('#progressbar').progressbar();
 $('#progressbar').show();
}

function phide(){
 $('#progressbar').fadeOut();
}

// some higher level workers for use with above

// the running progress bar with setInterval
function doPBStart(){
 pshow();
 pset(p);
 try{
  clearInterval(timer);
 } catch (e) {}
 timer = setInterval(function(){setP()},300);
}

function setP(){
 p++;
 p > 100 ? p=0 : p=p;
 pset(p);
}

function doPBEnd(){
 pshow();
 pset(100);
 phide();
 clearInterval(timer);
 p=0;
}