Спиннинг-курсор на отправке

Question

Я думаю, что это довольно распространенный вопрос, но я не нашел рабочего решения. Я хочу, чтобы курсор начал вращаться (cursor: wait), когда пользователь нажимает кнопку отправки для формы.

<button type="submit" class="save btn btn-grey" id="button">Gem</button> 

Это решение, которое я пробовал: https://jsfiddle.net/Zht9B/240/

Проблема заключается в том, что занят курсор исчезает, как только пользователь перемещает мышь от кнопки. Я хочу, чтобы курсор оставался занятым до загрузки новой страницы. (Подача формы приводит к новой странице)

Answer 1

изменить класс CSS для какого элемента вы хотите, чтобы появиться снова, вероятно тела ... к другому классу, который содержит:

cursor: wait

on submit (в этом случае с javascript/jquery).

Примечание: Корпус не работает в скрипте JS, но вы можете сделать контейнер div и протестировать его таким образом, я модифицировал скрипку, чтобы дать вам пример.

Т.е.

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

Answer 2

Вы можете связать событие onsubmit с формой. в приведенном ниже примере я добавил onclick на кнопку отправки вместо этого, потому что stackoverflow не поддерживает форму.

//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>