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

You can use this:

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

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

Answer 2

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.