Wait cursor over entire html page

If you use this slightly modified version of the CSS you posted from Dorward,

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

you can then add some really simple jQuery to work for all ajax calls:

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

or, for older jQuery versions (before 1.9):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});

I understand you may not have control over this, but you might instead go for a "masking" div that covers the entire body with a z-index higher than 1. The center part of the div could contain a loading message if you like.

Then, you can set the cursor to wait on the div and don't have to worry about links as they are "under" your masking div. Here's some example CSS for the "masking div":

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }

I have been struggling with this problem for hours today. Basically everything was working just fine in FireFox but (of course) not in IE. In IE the wait cursor was showing AFTER the time consuming function was executed.

I finally found the trick on this site: http://www.codingforums.com/archive/index.php/t-37185.html

Code:

//...
document.body.style.cursor = 'wait';
setTimeout(this.SomeLongFunction, 1);

//setTimeout syntax when calling a function with parameters
//setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1);

//no () after function name this is a function ref not a function call
setTimeout(this.SetDefaultCursor, 1);
...

function SetDefaultCursor() {document.body.style.cursor = 'default';}

function SomeLongFunction(someParam) {...}

My code runs in a JavaScript class hence the this and MyClass (MyClass is a singleton).

I had the same problems when trying to display a div as described on this page. In IE it was showing after the function had been executed. So I guess this trick would solve that problem too.

Thanks a zillion time to glenngv the author of the post. You really made my day!!!

This seems to work in firefox

<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>

The * part ensures that the cursor doesn't change when you hover over a link. Although links will still be clickable.