Изменение курсора на ожидание в javascript/jquery

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

body.waiting * {
    cursor: progress;
}

затем, чтобы включить курсор прогресса, скажите:

$('body').addClass('waiting');

и чтобы выключить курсор прогресса, скажите:

$('body').removeClass('waiting');

преимущество этого подхода заключается в том, что при выключении курсора прогресса все другие курсоры, которые могли быть определены в вашем CSS, будут восстановлены. Если правило CSS недостаточно мощное в приоритете чтобы отменить другие правила CSS, вы можете добавить идентификатор в тело и в правило или использовать !important.

С помощью jquery и css:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML:<div id="element">Click and wait</div>​

CSS:.wait {cursor:wait}​

демо здесь

переопределить все отдельные элементы

$("*").css("cursor", "progress");

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

это создаст курсор загрузки, пока ваш вызов ajax не завершится успешно.

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

selector {
    cursor: url(myimage.jpg), auto;
}

посмотреть здесь для поддержки браузера как есть некоторые тонкие различия в зависимости от браузера

следующий мой предпочтительный способ, и будет менять курсор каждый раз, когда страница собирается изменить т. е. beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

jQuery:
$("body").css("cursor", "progress");

снова
$("body").css("cursor", "default");

чистый:
document.body.style.cursor = 'progress';

снова
document.body.style.cursor = 'default';

пожалуйста, не используйте jQuery для этого в 2018 году! Нет никакой причины включать всю внешнюю библиотеку только для выполнения этого одного действия, которое может быть достигнуто с помощью одной строки:

изменить курсор на spinner:document.body.style.cursor = 'wait';

вернуть курсор в нормальное: document.body.style.cursor = 'default';

вот еще кое-что интересное можно сделать. Определите функцию для вызова непосредственно перед каждым вызовом ajax. Также назначьте функцию для вызова после завершения каждого вызова ajax. Первая функция установит курсор ожидания, а вторая очистит его. Они выглядят следующим образом:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

если он сохраняет слишком быстро, попробуйте это:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

установка курсора для "тела" изменит курсор для фона страницы, но не для элементов управления на нем. Например, кнопки по-прежнему будут иметь обычный курсор при наведении на них. Вот что я использую:

чтобы установить курсор' wait', создайте элемент стиля и вставьте в голову:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

затем, чтобы восстановить курсор, удалите элемент стиля:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}