Spinning cursor on submit

I think this is a quite common question, but I haven't been able to find a working solution. I want the cursor to start spinning (cursor: wait) when the user clicks on the submit button for a form.

<button type="submit">Gem</button>

This is the solution I have tried:

The problem is that the busy cursor disappears as soon as the user moves the mouse away from the button. I want the cursor to stay busy until the new page has loaded. (Submitting the forms leads to a new page)

2 Answers

Change the CSS class for whichever element you want it to appear over, probably body... to another class that contains:

cursor: wait

on submit (in this case with javascript / jquery).

Note: Body doesn't work in JS fiddle, but you can make a container div and test it out that way, I've modified the fiddle to give you an example.

Ie.

$("#button").click(function(){ $(".contain").addClass("wait"); $(this).addClass("wait");
});

You can bind an onsubmit event to the form. in the below example I have added an onclick on the submit button instead because stackoverflow doesn't support form's.

//onclick of submit button
document.getElementsByClassName('save')[0].onclick = function() { //save element for the removing of the class after the timeout. var elem = event.target; //add classes to the html and clicked button. event.target.className += " wait"; document.getElementsByTagName('html')[0].className += "wait"; //set timeout for removing the classes after 3 seconds. window.setTimeout(function() { elem.className -= " wait"; document.getElementsByTagName('html')[0].className -= "wait"; }, 3000);
}

.wait { cursor: wait;
}

<button type="submit">Gem</button>