ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
body { cursor: wait; }

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

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

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

Применение jQuery

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

JS
Скопировать код
$(document).on("ajaxStart", function() {
  $('html').addClass('wait');
}).on("ajaxStop", function() {
  $('html').removeClass('wait');
});

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

CSS
Скопировать код
html.wait, html.wait * {
  cursor: wait !important;
}

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

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

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

JS
Скопировать код
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 на всю высоту окна:

CSS
Скопировать код
html, body {
  min-height: 100%;
}

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

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

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

Markdown
Скопировать код
Ваш сад: [🍎🍐🍊🍋🍌]
Сеть:    [🔗🔗🔗🔗🔗]

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

Markdown
Скопировать код
🌐⌛: [⌛🍎🍐🍊🍋🍌]

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

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

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

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

HTML
Скопировать код
<div class="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: wait;"></div>

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

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

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

CSS
Скопировать код
.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.