Перевод курсора на ожидание в javascript / jquery

Как мне заставить мой курсор измениться на этот значок загрузки при вызове функции и как мне вернуть его на обычный курсор в javascript / jquery

В вашем jQuery используйте:

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

а затем снова вернуться в нормальное состояние

$("body").css("cursor", "default");

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

body.waiting * {
    cursor: progress;
}

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

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

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

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

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

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

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

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

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

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

Используя 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 не будет успешным.

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

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

Pure:
document.body.style.cursor = 'progress';

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

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

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

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

Вы можете сделать еще кое-что интересное. Определите функцию для вызова непосредственно перед каждым вызовом 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");

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

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

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

Я обнаружил, что единственный способ заставить курсор эффективно сбросить свой стиль обратно к тому, который он имел до изменения на стиль ожидания, - это установить исходный стиль в таблице стилей или в тегах стиля в начале страницы, установить класс рассматриваемого объекта на имя стиля. Затем, по истечении периода ожидания, вы устанавливаете стиль курсора обратно на пустую строку, НЕ «по умолчанию», и он возвращается к исходному значению, установленному в ваших тегах стиля или таблице стилей. Установка его на «по умолчанию» после периода ожидания изменяет только стиль курсора для каждого элемента на стиль, называемый «по умолчанию», который является указателем. Он не возвращает его к прежнему значению.

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