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

Answer 1

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 2

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 3

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 4

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 5

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 6

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,