Спиннер

Спиннер — это зацикленный индикатор, не отображающий прогресс выполнения задачи.

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

Если выполнение команды в среднем занимает больше 10 секунд, лучше показывать прогресс-бар.

Если процесс происходит на стороне сервера и можно закрыть окно браузера — сообщите об этом пользователю.

В библиотеке предусмотрено три размера спиннера:

• S для встраивания в строку или небольшой контрол.

• M для показа в модальных окнах и компонентах среднего размера.

• L для использования в рамках всей страницы.

Размер S используется внутри строки или в контролах соответствующего размера.

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

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

Не размещайте спиннер непосредственно поверх контента, он начинает «шуметь». Положите его на плашку или установите прозрачность контента на 50%.

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

Если вы используете спиннер как вынужденную замену глобальному лоадеру, покажите его в главном блоке, остальной контент отобразите в виде структурного скелетона.

Неправильно

Правильно

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

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

Спиннер может быть двух вариантов:

• Многоцветный — на каждом обороте новый цвет из палитры.
• Серый — для использования на заблокированных контролах:

Не используйте подписи:

• «Идет загрузка».
• «Пожалуйста, подождите».

Дефолтная подпись к спиннеру в библиотеке React UI: «Загрузка» — старайтесь заменить её на более информативную.

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

Не используйте страдательный залог. Пишите от первого лица множественного числа или используйте существительное для названия процессов:

• Неправильно: «Отчет проверяется».
• Правильно: «Проверяем отчет» или «Проверка отчета».

Не ставьте многоточие в конце, в анимированном спиннере оно лишнее.

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