How to show loading spinner in jQuery?

Question

In Prototype I can show a "loading..." image with this code:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

In jQuery, I can load a server page into an element with this:

$('#message').load('index.php?pg=ajaxFlashcard');

but how do I attach a loading spinner to this command as I did in Prototype?

Solution 1

There are a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

The ajaxStart/Stop functions will fire whenever you do any Ajax calls.

Update: As of jQuery 1.8, the documentation states that .ajaxStart/Stop should only be attached to document. This would transform the above snippet to:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Solution 2

For jQuery I use

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

Solution 3

You can just use the jQuery's .ajax function and use its option beforeSend and define some function in which you can show something like a loader div and on success option you can hide that loader div.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

You can have any Spinning Gif image. Here is a website that is a great AJAX Loader Generator according to your color scheme: http://ajaxload.info/

Solution 4

If you are using $.ajax() you can use somthing like this:

$.ajax({
  url: "destination url",
  success: sdialog,
  error: edialog,
  // shows the loader element before sending.
  beforeSend: function() {
    $("#imgSpinner1").show();
  },
  // hides the loader after completion of request, whether successfull or failor.             
  complete: function() {
    $("#imgSpinner1").hide();
  },
  type: 'POST',
  dataType: 'json'
});

Although the setting is named "beforeSend", as of jQuery 1.5 "beforeSend" will be called regardless of the request type. i.e. The .show() function will be called if type: 'GET'.

Solution 5

You can insert the animated image into the DOM right before the AJAX call, and do an inline function to remove it...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

This will make sure your animation starts at the same frame on subsequent requests (if that matters). Note that old versions of IE might have difficulties with the animation.

Good luck!

View more solutions

Comments

[montrealist]

That's probably too global for one simple load into a DIV.

[nickf]

too global? how many different "please wait" messages do you want?

[uriDium]

Top tip: Preload the spinner.gif in a div with display set to none. Otherwise you might get a bit of a delayed spinner effect as the spinner still downloads.

[glaz666]

this way unfortunately you can't control loading div positioning in case you don't want to just show a modal loading window, but show it near the element waiting for ajax content to be loaded in...

[David Xia]

ajaxStart and ajaxStop are jQuery events so you can namespace them: stackoverflow.com/questions/1191485/… docs.jquery.com/Namespaced_Events

[Gordon Thompson]

nice tip, much simpler than using somebody else's plugin

[Tim Büthe]

You could have timing problems there, don't you?

[Jaseem]

@UltimateBrent I think you got it wrong. Why is showLoad() not a callback? JavaScript will load content asynchronously. showLoad() will work even before the content is loaded if i'm correct.

[Jaseem]

One plugin for this simple task? That is not really a good solution is it? Who wants to load 100 scripts on a page?

[Jaseem]

It will be hard to manage UI this way. We may need completely different styles for the "loading" text and final message. We can use the callback method mentioned above for handling this problem

[yigal]

works for me, the html should have something like: <div id='loader'><img src="spinner.gif"/></div>

[Both FM]

Nice! but dear , one thing more that I want to display spinner for 2 seconds even the page has already loaded.

[Josh Stodola]

@BothFM Because people enjoy waiting for things...?

[Scott]

Agreed. Compress and concatenate, if you want better performance.

[Lee Goddard]

Disagreed: separate and modularise, reuse code, if you want to be able to maintain your work and have others do so too. What the chance of your user having such a poor connection their client can't load a plugin as well as your code?

[Lee Goddard]

The success won't be called if there is an error, but "you will always receive a complete callback, even for synchronous requests," according to jQuery Ajax Events.

[Travis J]

This is very clear, +1! @glaz666 - That is not true. It is all about how you configure it. For example: .ajaxStart(function(e) { CallFunctionWithTargettedElement(e.currentTarget); }) will call a function where the argument is the element which initiated the ajax call. Note that this is just an example with no handling for if the ajax was called from a script without an event handler or any other error checking whatsoever. It is merely to show that there are ways of controlling the positioning. The function called could place an absolute element over the calling element.

[deckoff]

This works for me only the first time I trigger the query, second and next times the animation does not show. any ideas?

[nickf]

@deckoff it only triggers when an ajax request is started and there were no ajax requests still active.

[Joel Peltonen]

@Jaseem I use a similar method too and it actually relies on async calls. I would place showLoad somewhere before the ajax call but the whole point is to show a spinner, let JS start the call, and kill the spinner in a callback after the AJAX has completed.

[kenswdev]

This one was cleanest for me. Instead of ajaxSetup, I placed beforeSend: and complete: inside the $ajax({... statement.

[Dom M.]

If using jQuery >= 1.9, attach the ajaxStart and ajaxStop events to $(document). jquery.com/upgrade-guide/1.9/…

[pec]

Don't know what it's worth, but jQuery mentions in it's documentation that using .ajaxSetup() is not recommended. link

[nickf]

Note here that beforeSend is called before every call, whereas ajaxStart is triggered only when the first ajax method is called. Likewise for ajaxStop, it is called when the last ajax call finishes. If you have more than one concurrent request, the snippet in this answer won't work properly.

[Sergey Orshanskiy]

Does not work for me if the ajax call times out (Firefox 28 for Mac).

[SpringLearner]

@NathanBubna The link is dead

[Izabela Skibinska]

Shortest way would be to insert image tag with an image downloaded from ajaxload.info with transparent background

[mercury]

ajaxSetup is like general setting for ajax reauests

[andrew oxenburgh]

"What the chance of your user having such a poor connection their client can't load a plugin as well as your code?" Pretty good I'd say.

[Matt]

Really nice! Especially if you take a look at the demos ... Disable DOM elements, In Tag, Full Overlay, Element Overlay ... it provides everything you need. And you can easily combine Full Overlay with this answer to get it working instantly.

[ankush981]

But you need to hide the spinner on error as well.