Spinning cursor on submit

Question

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" class="save btn btn-grey" id="button">Gem</button>

This is the solution I have tried: https://jsfiddle.net/Zht9B/240/

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)

the problem with the duplicate is that everything is jQuery and OP never mentioned jQuery. — Kevin Kloet, Dec 20 '16 at 08:53
this is how you can do it in javascript: `document.getElementsByTagName("body")[0].style.cursor = 'wait'; ` or `document.body.style.cursor = 'wait';`, note that this only works when hovering on other elements inside the body. — Kevin Kloet, Dec 20 '16 at 08:54
@alexandru-severin I've edited the solution to reflect what I've tried and the problem with the solution. — Wessi, Dec 20 '16 at 09:12
@curt could you please remove the duplicate status. It's two different questions. I want the cursor to stay busy if you move it from the button. In the answers in question you link to the cursor only spins if you keep hovering over the button/link. — Wessi, Dec 20 '16 at 09:17
@KevinKloet Re-opened, however the OP has used jQuery in their example (jsfiddle). — Curtis, Dec 20 '16 at 09:54

MikeDub · Accepted Answer · 2016-12-20T10:06:22.583

3

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");
});

edited Dec 20 '16 at 10:06

answered Dec 20 '16 at 09:56

MikeDub

5,143
3
27
44

Could you explain in a bit more detail how to do that? I apologize for being such a beginner. – Wessi Dec 20 '16 at 10:05
I've updated the fiddle, let me know if you can't see it. – MikeDub Dec 20 '16 at 10:07

score 3 · Answer 2 · answered Dec 20 '16 at 10:24

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" class="save btn btn-grey" id="button">Gem</button>

Spinning cursor on submit

2 Answers2