Wait cursor over entire html page

Aleris_20417 0
Viewed 97259

Is it possible to set the cursor to 'wait' on the entire html page in a simple way? The idea is to show the user that something is going on while an ajax call is being completed. The code below shows a simplified version of what I tried and also demonstrate the problems I run into:

  1. if an element (#id1) has a cursor style set it will ignore the one set on body (obviously)
  2. some elements have a default cursor style (a) and will not show the wait cursor on hover
  3. the body element has a certain height depending on the content and if the page is short, the cursor will not show below the footer

The test:

<html>
    <head>
        <style type="text/css">
            #id1 {
                background-color: #06f;
                cursor: pointer;
            }

            #id2 {
                background-color: #f60;
            }
        </style>
    </head>
    <body>
        <div id="id1">cursor: pointer</div>
        <div id="id2">no cursor</div>
        <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
    </body>
</html>

Later edit...
It worked in firefox and IE with: 

div#mask { display: none; cursor: wait; z-index: 9999; 
position: absolute; top: 0; left: 0; height: 100%; 
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}

<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>

The problem with (or feature of) this solution is that it will prevent clicks because of the overlapping div (thanks Kibbee)

Later later edit...
A simpler solution from Dorward:

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

and then 

<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

This solution only shows the wait cursor but allows clicks.

dynamic-css css html javascript
15 Answers

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%; }
Eric_Wendelin_250660

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.

Kibbee_18620

Why don't you just use one of those fancy loading graphics (eg: http://ajaxload.info/)? The waiting cursor is for the browser itself - so whenever it appears it has something to do with the browser and not with the page.

unexist_181790

Try the css:

html.waiting {
cursor: wait;
}

It seems that if the property body is used as apposed to html it doesn't show the wait cursor over the whole page. Furthermore if you use a css class you can easily control when it actually shows it.

GameFreak_266590

I used a adaptation of Eric Wendelin's solution. It will show a transparent, animated overlay wait-div over the whole body, the click will be blocked by the wait-div while visible:

css:

div#waitMask {
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    cursor: wait;
    background-color: #000;
    opacity: 0;
    transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

js:

// to show it
$("#waitMask").show();
$("#waitMask").css("opacity"); // must read it first
$("#waitMask").css("opacity", "0.8");

...

// to hide it
$("#waitMask").css("opacity", "0");
setTimeout(function() {
    $("#waitMask").hide();
}, 500) // wait for animation to end

html:

<body>
    <div id="waitMask" style="display:none;">&nbsp;</div>
    ... rest of html ...
user_4434270

To set the cursor from JavaScript for the whole window, use:

document.documentElement.style.cursor = 'wait';

From CSS:

html { cursor: wait; }

Add further logic as needed.

user_20615910

This pure JavaScript seems to work pretty well ... tested on FireFox, Chrome, and Edge browsers.

I'm not sure about the performance of this if you had an overabundance of elements on your page and a slow computer ... try it and see.

Set cursor for all elements to wait:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

Set cursor for all elements back to default:

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

An alternative (and perhaps a bit more readable) version would be to create a setCursor function as follows:

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

and then call

setCursor("wait");

and

setCursor("default");

to set the wait cursor and default cursor respectively.

user_37007670

Late to the party but simply give the Html tag an id by targeting

document.documentElement

and in the CSS place at the top

html#wait * {
    cursor: wait !important;
}

and simply remove it when you want to stop this cursor.

user_138995510
Related