Global AJAX Loading Spinners

Posted: March 23, 2011 in JavaScript
Tags: , ,

Many sites include what are known as AJAX Spinners. They are little graphics that show up on a web page that show something is happening behind the scenes. This is most commonly used when an AJAX request is being made and the end-user is waiting for a response.

There are many different ways you can make this happen.

One is to show and hide the spinner inside each AJAX method. Another is to show and hide the spinner inside the jQuery $.ajaxSetup configuration.

If you load individual spinners for each call this is a pain and can be cluttering. If you load a common spinner you can end up hiding it before a parallel request is finished unless you look at a queue, which is also a pain.

One easy way around all this confusion is to use jQuery’s global AJAX handlers: .ajaxStart and .ajaxStop (also look at .ajaxError)

First setup a common spinner container and graphic.

<style>
#ajaxSpinnerContainer {height:11px;}
#ajaxSpinnerImage {display:none;}
</style>

<div id="ajaxSpinnerContainer">
<img src="/images/ajax-loader.gif" id="ajaxSpinnerImage" title="working...">
</div>

One great place to generate these spinners is ajaxload.info.

The next step is to show the spinner when any AJAX request has begun and hide it when all AJAX requests have completed.

$(document)
.ajaxStart(function(){
    $("#ajaxSpinnerImage").show();
})
.ajaxStop(function(){
    $("#ajaxSpinnerImage").hide();
});

This quick and easy method avoids all the other headache associated with all the other techniques out there as long as you want the spinner shown in a single container.

Advertisements
Comments
  1. Tim says:

    you could chain that as well 🙂

    $(document).ajaxStart(function(){
    $(“#ajaxSpinnerImage”).show();
    })
    .ajaxStop(function(){
    $(“#ajaxSpinnerImage”).hide();
    });

  2. Stephen Weyrick says:

    Cool, thanks for sharing. Is there a way to show and hide based on certain ajax calls using this technique? For instance, what if I didn’t want to show the spinner.

    • Chris says:

      I’m not aware of something like that for general purposes, but I know it’s possible one way or the other. If I run into it down the road I will post an updated. Thanks for the feedback.

  3. Ivan says:

    Nice! You can also try to use AjaxLoader.js http://musicvano.github.io/ajaxloader – simple free JavaScript spinner. This small library allows generate classic ajaxloader dynamically.

  4. Sudha says:

    i want to show spinner for each div on ajax call..pls help me..

  5. Sivaprabu Ganesan says:

    I have 3 AJAX call means , i motioned different loader icons for both call, how can i handle ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s