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;.