I think this is a quite mon 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: /

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)

I think this is a quite mon 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/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)

• javascript
• css

• Your question shows no effort. What have you tried? – Alexandru Severin Commented Dec 20, 2016 at 8:47
• Do you mean cursor: wait? – putvande Commented Dec 20, 2016 at 8:49
• 2 the problem with the duplicate is that everything is jQuery and OP never mentioned jQuery. – Kevin Kloet Commented Dec 20, 2016 at 8:53
• 1 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 Commented Dec 20, 2016 at 8:54
• 1 @KevinKloet Re-opened, however the OP has used jQuery in their example (jsfiddle). – Curtis Commented Dec 20, 2016 at 9:54

2 Answers 2

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