JavaScript Cursor Change (and change back again)

Question

I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait" cursor so the user doesn't flip out and keep clicking the button. I've looked at the

document.body.style.cursor = "wait"

thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?

A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover" cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).

EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?

Answer 1

For your first problem, try using cursor: wait !important;.

For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.

Answer 2

Any elements that don't inherit the cursor by default (such as buttons) will need to set the cursor to inherit:

someButton.style.cursor = 'inherit';

To go back to the default for an element (and not break things like :hover with a forced cursor), set it to an empty string:

document.body.style.cursor = '';

Answer 3

What I suggest is two things: a) Better write a CSS like

body.waiting * { cursor: wait; }

b) Use the JS to handle the body class

/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want

You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.

EDIT 2019: don't use jQuery for just this, use classList

Answer 4

To fully replace the CSS toggling behaviour, we can simply use this inline:

<img 
  src=https://cdn.sstatic.net/Img/unified/sprites.svg
  onmouseover="this.style.cursor = 'crosshair'"
>

Answer 5

If you are happy using JQuery then a quick way to solve this would be to use:

$('*').css('cursor','wait')

I don't know how elegant this is but it has been working for me,

Answer 6

The styling should be handled via CSS, as stated by W3C.com:

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

As suggested by Tom Rogerro, add a line to your CSS file:

body.waiting * { cursor: wait; }

However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.

To add a class name 'waiting' to the document body:

document.body.classList.add('waiting');

To remove a class name 'waiting' from the document body:

document.body.classList.remove('waiting');

Answer 7

Not an answer to the question, but a way of achieving what is wanted.

Make a div (see class below) visible when you are loading.

• ensures no element is accessible and dimmed display indicates this.

• you can add an animated gif to indicate something is going on instead of the cursor.

  .loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}

Answer 8

I tried everything but finally this jquery worked, especially if you want wait cursor over all elements including buttons and links.

define at the top of angular .ts file

declare var $: any;

and then where ever you want wait cursor:

$('*').css('cursor','wait');

and remove wait:

$('*').css('cursor','auto');