Spinner
Компонент для отображения индикатора загрузки. Используется во время выполнения асинхронных операций.
Связанные компоненты:
Настройка отображения
Размеры
Задаются свойством size:
Анимация
Можно отключить анимацию с помощью свойства disableAnimation:
Цвет
По умолчанию наследует цвет родителя (определённое css-свойство color).
Для ручного управления цветом используйте свойство noColor:
Когда использовать
- Во время загрузки данных.
- При выполнении фоновых операций.
- В сочетании с кнопками/формами.
Альтернатива
Для полной блокировки интерфейса используйте ScreenSpinner:
<ScreenSpinner state="loading" />Доступность (a11y)
Базовые требования
Чтобы уведомить о выполнении асинхронного процесса пользователей скринридеров, проставьте на контейнер,
в котором выполняется процесс, метки aria-busy ↗ и aria-live ↗
<div aria-busy={true} aria-live="polite">
<Spinner />
</div>Пользовательский текст для скринридеров
Чтобы заменить текст, который прочитает скринридер, передайте его в children.
Он будет скрыт визуально, но останется доступным для ассистивных технологий.
<Spinner>
<VisuallyHidden>Идёт загрузка профиля...</VisuallyHidden>
</Spinner>Свойства и методы
| Свойство | Описание |
|---|---|
disableAnimation | booleanОтключение анимации. По умолчанию: - |
getRootRef | Ref<HTMLSpanElement>По умолчанию: - |
noColor | booleanЗадать цвет можно будет через свойство color родителя. По умолчанию: - |
size | "s" | "m" | "l" | "xl"Размер спиннера. По умолчанию: - |
visibilityDelay | numberЗадерживает отрисовку элемента на заданное количество миллисекунд. По умолчанию: - |