How to change cursor to wait when using jQuery .load()

Try:

Updated to work with jQuery 1.8 +

$(document).ajaxStart(function() {    $(document.body).css({'cursor' : 'wait'});}).ajaxStop(function() {    $(document.body).css({'cursor' : 'default'});});

Cursor changes on any ajax start and end. That includes .load().

Try out the different cursor styles here:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

I had to tweak the eloquent answer above to work with jQuery > 1.8.

$(document).ajaxStart(function () {    $(document.body).css({ 'cursor': 'wait' })});$(document).ajaxComplete(function () {    $(document.body).css({ 'cursor': 'default' })});

I don't like the solution that simply add the css property to the body tag: it's not gonna work if you already have a cursor assigned to your element. Like me, I use cursor: pointer; on all my anchor tag. So, I came up with this solution:

Create a CSS class to avoid overwriting the current cursor (to be able to go back to normal afterwards)

.cursor-wait {    cursor: wait !important;}

Create the functions to add and remove the cursor

cursor_wait = function(){    // switch to cursor wait for the current element over    var elements = $(':hover');    if (elements.length)    {        // get the last element which is the one on top        elements.last().addClass('cursor-wait');    }    // use .off() and a unique event name to avoid duplicates    $('html').    off('mouseover.cursorwait').    on('mouseover.cursorwait', function(e)    {        // switch to cursor wait for all elements you'll be over        $(e.target).addClass('cursor-wait');    });}remove_cursor_wait = function(){    $('html').off('mouseover.cursorwait'); // remove event handler    $('.cursor-wait').removeClass('cursor-wait'); // get back to default}

Then create your ajax function (I don't use events like ajaxStart or ajaxStop because I don't want to use cursor wait with all my ajax call)

get_results = function(){    cursor_wait();    $.ajax({        type: "POST",        url: "myfile.php",        data: { var : something },        success: function(data)        {            remove_cursor_wait();        }    });}

I'm not very familiar with jQuery load(), but I guess it will be something like this:

$('button').click(function(){    cursor_wait();    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr)    {        if (statusTxt == "success")        { remove_cursor_wait(); }    });});

DEMO

Hope it helps!