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?

Newsome

Answer 1

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

Inapproachable

I thought about adding this to my apps last week. Simple. Clean. – Inapproachable

I think this might be the Mona Lisa of the coding world! Certainly feels like it after the hideous solutions I've been trying! Nice work bro! – Geraldgeralda

Although it is an old post, just wanted to point out that as of jQuery 1.8, the .ajaxStop() method should only be attached to document. Thus, @Nomadize 's answer below is the right answer for recent jQuery versions. Cheers. – Miyasawa

At last something that works! Could not vote more than once. – Govea

Answer 2

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

Nomadize

You could still replace those $(document.body) with just $('body') to make it shorter. Or $(this.body) if you don't want to use a string ^_^ – Horoscope

Answer 3

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!

Brenza

Thanks, this is a good solution. There is a tiny flicker when hovering over an element such as input. Any idea to fix? – Festivity

Answer 4

You can use this:

$('body').css('cursor', 'progress'); 

before you start loading and once complete change the cursor to auto

Lolalolande

Answer 5

I hope this helps

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

greetings

Bessel

Answer 6

I tried the various methods I found here and other places and decided there are too many bugs in various browsers (or even setups, like RDP/VNC/Terminal users) with changing the mouse cursor. So instead I ended up with this:

Inside my app init code that fires after document ready:

    // Make working follow the mouse
    var working = $('#Working');
    $(document).mousemove(function(e) {
        working.css({
            left: e.pageX + 20,
            top: e.pageY
        });
    });

    // Show working while AJAX requests are in progress
    $(document).ajaxStart(function() {
        working.show();
    }).ajaxStop(function() {
        working.hide();
    });

And towards the end of my HTML, just inside the body I have:

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div>

It works a lot like the "app loading" mouse cursor in Windows, where you still get your normal cursor, but you can also tell that something is happening. This is ideal in my case because I want the user to feel they can still do other stuff while waiting, since my app handles that pretty well so far (early stages of testing).

My loading.gif file is just a typical spinning wheel, about 16x16 pixels, so not too annoying, but obvious.

Camenae

Answer 7

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.

Allegedly

Answer 8

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/

Clean