The following is based on a jQuery Mobile app I am working on. But, the code and details apply to jQuery, too.
The app I am working on makes frequent Ajax calls to back-end services, and so I want a busy indicator that shows the user that activity is occurring. This is actually really easy to do, once you have a few steps in place. So …
First you’ll need the indicator itself. The simplest way to do this is with an animated GIF (and, yes, that means that the indicator won’t reflect the relative wait time like a progress bar would). For great free animated GIF loading indicators, go to ajaxload.info. Once you have the image, embed it in your page using an tag:

I want the image centered on the page, accomplished using this CSS:
.ajaxLoader {
position: fixed;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
z-index: 100;
display: none;
}

The GIF I used was 48px x 48px, so the margins are set to -half that size. That, combined with 50% for top and left ensures that the image is centered in the page. z-index is set to 100 to ensure that the image is in the foreground, and display:none prevents the image from being displayed.
Now there is an invisible animated GIF on the page. The next step is to show the image when an Ajax call starts and hide it when the call completes. jQuery makes this incredibly simple to do via the ajaxSetup() function. Here’s the code:
$.ajaxSetup({
beforeSend:function(){
$("#imgAjaxLoader").show();
},
complete:function(){
$("#imgAjaxLoader").hide();
}
});

When an Ajax call is initiated, beforeSend calls .show() to display the animated GIF, and when complete, .hide() hides the image. Simple.
My own jQuery Mobile app makes Ajax calls on multiple pages, and so I embedded the same animated GIF on each page, all using the same style. Rather than bothering to track which page is displayed to show / hide just that animated GIF, I use jQuery to show / hide all of them, like this:
$.ajaxSetup({
beforeSend:function(){
$(".ajaxLoader").show();
},
complete:function(){
$(".ajaxLoader").hide();
}
});

.ajaxLoader finds every tag styled as ajaxLoader, so $(“.ajaxLoader”).show() shows all of the loader GIFs and $(“.ajaxLoader”).hide() hides them all.
Nice and simple!

5 thoughts

  1. Hey Ben, this is a good one if you’re actually doing a jQuery Mobile app… jQuery Mobile actually already has this built in with two different functions.
    To SHOW the loading spinner, use the function: $.mobile.showPageLoadingMsg();
    To HIDE the loading spinner, use the function: $.mobile.hidePageLoadingMsg();
    Link to the documentation on this: http://jquerymobile.com/test/docs/api/methods.html
    Hope this is a good resource for people!

  2. When I need to let the user know that something is happening via Ajax, I usually use the BlockUI jQuery plugin. It comes in very handy when certain (or multiple) sections are being updated and I need to block specific controls. In addition to showing an user-defined indicator, it locks out the element from being interacted with.
    http://jquery.malsup.com/block/
    I’ve also used this on jQueryMobile apps (targeting touch tablets and not just mobile devices). I’ve used it to show a short form and request a passcode before proceeding. (Sometimes using jQueryUI’s dialog() is overkill and I haven’t been able to get it to play nice with jQueryMobile yet.)

  3. Another option to consider for jQuery Mobile apps, but one that is a bit of a hack (for now), is to use $.mobile.showPageLoading/$.mobile.hidePageLoading. This shows (and hides, obviously) the page loading message. You can configure the message, but not on a per load call. So it’s not quite a recommended feature yet, but I’m hoping they allow for it in the future. (In my app, I actually copied out the default msg, changed it, ran this, and then set it back, less than ideal, but it worked and looked cool.)

Leave a Reply