I would rather do it more elegantly like 1 so:

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS:

html.busy, html.busy * {  
  cursor: wait !important;  
}  

Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/

It is a bug in both browsers at the moment. More 2 details at both links (in comments as well):

http://code.google.com/p/chromium/issues/detail?id=26723

and 1

http://code.google.com/p/chromium/issues/detail?id=20717

I believe this issue (including the mousedown 4 problem) is now fixed in Chrome 50.

But 3 only if you are not using the developer 2 tools!!

Close the tools and the cursor should 1 immediately respond better.

I got inspired from Korayem solution.

Javascript:

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

CSS:

.busy * {
    cursor: wait !important;
}

Tested 6 on Chrome, Firefox and IE 10. Cursor changes 5 without moving the mouse. "!important" is 4 needed for IE10.

Edit: You still have to 3 move cursor on IE 10 after the AJAX request 2 is complete (so the normal cursor appear). Wait 1 cursor appears without moving the mouse..

Working solution on CodeSandbox

Some of the other solutions do not work 20 in all circumstances. We can achieve the 19 desired result with two css rules:

body.busy, .busy * {
  cursor: wait !important;
}

.not-busy {
  cursor: auto;
}

The former 18 indicates that we are busy and applies to 17 all elements on the page, attempting to 16 override other cursor styles. The latter 15 applies only to the page body and is used 14 simply to force a UI update; we want this 13 rule to be as non-specific as possible and 12 it doesn't need to apply to other page elements.

We 11 can then trigger and end the busy state 10 as follows:

function onBusyStart() {
    document.body.classList.add('busy');
    document.body.classList.remove('not-busy');
}

function onBusyEnd() {
    document.body.classList.remove('busy');
    document.body.classList.add('not-busy');
}

In summary, although we have 9 to change the cursor style to update the 8 cursor, directly modifying document.body.style.cursor or similar does 7 not have the intended effect, on some engines 6 such as Webkit, until the cursor is moved. Using 5 classes to affect the change is more robust. However, in 4 order to reliably force the UI to update 3 (again, on some engines), we have to add 2 another class. It seems removing classes 1 is treated differently from adding them.

Korayem's solution works for me in 100% cases 6 in modern Chrome, Safari, in 95% cases in 5 Firefox, but does not work in Opera and 4 IE.

I improved it a bit:

$('html').bind('ajaxStart', function() {
    $(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
    $(this).removeClass('busy').addClass('notbusy');
});

CSS:

html.busy, html.busy * {
    cursor: wait !important;
}

html.notbusy, html.notbusy * {
    cursor: default !important;
}

Now it works 3 in 100% cases in Chrome, Safari, Firefox 2 and Opera. I do not know what to do with 1 IE :(

First of all, you should be aware that if 20 you have a cursor assigned to any tag within 19 your body, $('body').css('cursor', 'wait'); will not change the cursor of 18 that tag (like me, I use cursor: pointer; on all my anchor 17 tag). You might want to look at my solution 16 to this particular problem first : cursor wait for ajax call

For the 15 problem that the cursor is only updated 14 once the user move the mouse on webkit browsers, as 13 other people said, there is no real solution.

That 12 being said, there is still a workaround 11 if you add a css spinner to the current 10 cursor dynamically. This is not a perfect 9 solution because you don't know for sure 8 the size of the cursor and if the spinner 7 will be correctly positioned.

CSS spinner 6 following the cursor: DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

You will need to check 5 if it is a touch device as well var isTouchDevice = typeof window.ontouchstart !== 'undefined';

In conclusion, you 4 better try to add in your page a static 3 spinner or something else that shows the 2 loading process instead of trying to do 1 it with the cursor.

I don't think you'll be able to do it.

However, try 1 changing the scroll position; it might help.

HERE is my solution:

function yourFunc(){

$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
 .mouseXPos(e.pageX + 1)
 .mouseYPos(e.pageX - 1);
});

}

0

As of jquery 1.9 you should ajaxStart and ajaxStop to document. They work fine for 2 me in firefox. Have not tested in other 1 browsers.

In CSS:

html.busy *
{
   cursor: wait !important;
}

In javaScript:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )