Wait cursor over entire html page

Question

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 com

Answer 1

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.