Спиннер

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

В Контуре спиннеры еще называют «ромашка» или «крутилка».

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

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

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

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

Размер

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

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

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

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

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

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

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

Расположение

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

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

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

Неправильно

Правильно

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

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

Цвет

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

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

Подпись

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

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

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

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

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

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

Тайминг

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