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

Question

While waiting for a response from a .load(), is there any way to change the cursor to the busy/wait cursor?

Answer 1

Try:

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

As of jQuery 1.8, the .ajaxStop() and the .ajaxComplete() methods should only be attached to document.

Interchanging .ajaxStop() with .ajaxComplete() both gave me satisfactory results.

Answer 2

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!

Answer 3

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

Answer 4

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' })
});

Answer 5

I hope this helps

$("body").css('cursor','wait');
   //or
   $("body").css('cursor','progress');

greetings

Answer 6

Change the body's CSS to cursor: progress.

To do this, just make a "waiting" class with this CSS, and then add/remove the class from the body.

CSS:

.waiting {
    cursor: progress;
}

Then in your JS:

$('body').addClass('waiting');

You can remove it later with .removeClass.

• https://developer.mozilla.org/en/CSS/cursor
• http://api.jquery.com/addClass/
• http://api.jquery.com/removeClass/