Как установить курсор 'wait' по всей HTML-странице

Быстрый ответ

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

body { cursor: wait; }

Этот метод позволяет заменить обычный курсор на значок ожидания на всей странице, информируя пользователя о процессе обработки или загрузке данных. Реализация такого поведения не требует применения JavaScript — это простое и эффективное решение.

Динамическое изменение курсора

В некоторых ситуациях вы можете почувствовать необходимость динамически менять вид курсора, например, во время отправки Ajax-запросов. Это можно реализовать с использованием jQuery или чистого JavaScript.

Применение jQuery

Если вы предпочитаете использование jQuery, можно добавить класс wait к элементу html при начале Ajax-запроса и убирать его по окончанию обработки. Пример кода:

$(document).on("ajaxStart", function() {
  $('html').addClass('wait');
}).on("ajaxStop", function() {
  $('html').removeClass('wait');
});

Дополните это соответствующим CSS-правилом:

html.wait, html.wait * {
  cursor: wait !important;
}

При таком подходе курсор в режиме ожидания будет отображаться в течение всего времени обработки Ajax-запросов, а !important позволит переопределить другие стили курсора.

Подробнее об этом расскажет наш спикер на видео

Применение чистого JavaScript

Если вы предпочитаете работать без jQuery, изменить вид курсора можно и при помощи чистого JavaScript:

document.addEventListener('ajaxStart', function() {
  document.documentElement.classList.add('wait');
});
document.addEventListener('ajaxStop', function() {
  document.documentElement.classList.remove('wait');
});

При использовании этого CSS будет достигнут такой же результат, как и при применении jQuery.

Берём в расчёт пользовательский опыт

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

Обработка совместимости браузеров и альтернативные варианты

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

Рассматриваем сложные аспекты работы с контентом

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

Обработка коротких страниц

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

html, body {
  min-height: 100%;
}

Таким образом, курсор в режиме ожидания будет отображаться даже в случае, когда на экране нет контента.

Визуализация

Смену курсора на вашей странице можно представить аналогично ситуации, когда вы накрываете целый фруктовый сад плотной сетью:

Ваш сад: [🍎🍐🍊🍋🍌]
Сеть:    [🔗🔗🔗🔗🔗]

Сеть покрывает сад:

🌐⌛: [⌛🍎🍐🍊🍋🍌]

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

Погружение в детали: дополнительные сценарии использования

Возможность использования маскирующего div

Другой подход для отображения курсора ожидания — использование маскирующего div:

<div class="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: wait;"></div>

Такой метод хорошо подходит для временной блокировки пользовательского ввода в процессе выполнения определённых операций.

Поддержка интерактивности с пользователем

Если вы хотите дать возможность взаимодействовать с отдельными частями страницы во время ожидания, можно установить стандартный вид курсора для конкретных элементов:

.interactive-div {
  cursor: default;
}

Это позволит сохранить доступность части страницы для пользовательских действий.

Полезные материалы

1. cursor – CSS: Cascading Style Sheets | MDN — подробное описание свойства cursor в справочнике MDN.
2. cursor | CSS-Tricks — советы и примеры применения свойства cursor на сайте CSS-Tricks.
3. CSS cursor property — интерактивная демонстрация на сайте W3Schools, показывающая возможности использования курсора wait.
4. Introducing the New CSS Cursor Styles in CSS3 — SitePoint — статья на SitePoint о новом функционале курсоров в CSS3.
5. Document: readyState property – Web APIs | MDN — информация о состоянии загрузки документа на MDN, полезная для синхронизации курсора и состояния загрузки страницы.
6. Window: load event – Web APIs | MDN — информация о событии окончания загрузки окна на MDN.