Индикатор загрузки
Индикатор показывает, что что-то загружается. Это обратная связь, а не элемент управления.
<tk-spinner size="24" label="Loading results"></tk-spinner>
Анатомия
| Часть | Что это |
|---|---|
tk-spinner |
сам элемент; декоративный или, если задан label, область role="status" |
| лепестки | восемь лепестков с затухающим следом, который шагает по кругу |
| подпись | скрытый текст из label; доступное имя |
Размеры
<tk-spinner></tk-spinner> <tk-spinner size="20"></tk-spinner> <tk-spinner size="24"></tk-spinner> <tk-spinner size="32"></tk-spinner>
size |
Размер | Токен | Для чего |
|---|---|---|---|
16 (по умолчанию) |
16px | icon-size-16 |
в строке, рядом с текстом 14px |
20 |
20px | icon-size-20 |
рядом с текстом 16px |
24 |
24px | icon-size-24 |
загружающаяся карточка или часть списка |
32 |
32px | icon-size-32 |
загружающаяся панель или пустая область |
Меньше 16px и больше 32px размеров нет.
Цвет
Индикатор берёт текущий цвет текста, отдельного атрибута для цвета нет. На обычной
поверхности он совпадает с основным текстом. Чтобы сделать его тише, задайте контейнеру цвет
icon/*.
<span style="color: var(--icon-secondary)"><tk-spinner size="24" label="Loading comments"></tk-spinner></span>
Контраст цвета с фоном должен быть не ниже 3:1.
Движение
- След перемещается по одному лепестку, один оборот за 0.8s.
- Если включено уменьшение движения, оборот занимает 2s. Индикатор замедляется, но не останавливается, чтобы не казалось, что загрузка закончилась.
- Атрибута
loadingнет: показывайте индикатор, пока идёт загрузка, и убирайте, когда она закончится.
Когда использовать
- Для загружающейся области или ожидания в строке, например когда панель подгружает содержимое, а остальной экран остаётся на месте.
- Если ждёт действие кнопки, используйте её
loading. Кнопка сохранит размер, не примет повторных нажатий и сообщит, что занята. Индикатор рядом с кнопкой ничего этого не делает. - Долгое ожидание сопровождайте текстом. Одно движение не должно быть единственным признаком загрузки.
Текст
- В
labelназовите, что загружается: «Загрузка результатов», а не просто «Загрузка». - При долгом ожидании добавьте видимый текст рядом с индикатором.
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
loading у кнопки для ждущего действия |
Ставить индикатор рядом с кнопкой или внутрь неё вручную |
label у отдельного индикатора |
Отдельный индикатор без подписи |
| Текст при долгом ожидании | Только движение |
| Цвет через контейнер | Перекрашивать лепестки |
| Размер от 16 до 32 | Уменьшать меньше 16px |
Связанные
Button иIcon button :loadingпоказывает этот индикатор.Skeleton : заглушка в форме загружающегося содержимого.Progress bar : загрузка, когда известен объём.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
size |
16 | 20 | 24 | 32 |
16 |
размер в px |
label |
string | не задан | делает индикатор областью role="status" с этим именем; без него индикатор декоративный |
Слоты
Нет.
События
Нет. Индикатор не интерактивный.
Токены
| Часть | Токен |
|---|---|
| размер | icon-size-16, icon-size-20, icon-size-24, icon-size-32 |
| лепестки | текущий цвет текста от контейнера |
| один оборот | duration-800; при уменьшении движения duration-2000 |
Доступность
Встроено:
- Без
labelиндикатор скрыт от скринридеров. Так его используют внутри того, что уже сообщает о занятости, например кнопки сloading. - С
labelэто областьrole="status", и подпись зачитывается. - Индикатор не получает фокус и не нажимается.
На вашей стороне:
- Задайте
labelкаждому индикатору, который стоит сам по себе. - Контраст его цвета с фоном не ниже 3:1.