Определение

Spinner (спиннер) — визуальный элемент, указывающий пользователям, что действие обрабатывается и что на странице произойдут изменения.

Варианты

Спиннер может иметь разные размеры, каждый из которых применяется в необходимом контексте:

• s — используется внутри контролов (кнопки, переключатели и т. д);
• m — используется в формах, где есть ограничения по пространству;
• l — используется в формах, где нет ограничения по пространству;
• xl — используется для обработки всей страницы.

Основные правила

• Необходимо применять встроенный компонент загрузки для любых действий, которые не могут быть выполнены мгновенно и требуют лишь короткого времени для обработки.
• Нельзя одновременного использовать нескольких анимаций загрузки на одной странице.
• Одна из функций анимации загрузки — определение области загрузки. 
• К анимации загрузки следует применить движение и убедить пользователя, что содержимое страницы загружается «за кулисами».
• Если спиннер располагается на цветном или контрастном фоне, то необходимо применить спиннер для темной темы.

Построение

Спиннер состоит из:

• loader — вращающийся графический элемент;
• label — вспомогательный текст, объясняющий статус загрузки.

Спиннер можно использовать как с лейблом, там и без него. Чаще всего спиннер без лейбла применяется внутри полей ввода и кнопок.

Спиннер с лейблом имеет 2 варианта отображения:

• с текстом справа;
• с текстом снизу.