Spinner

<sf-spinner> показывает, что работа идёт, но сколько ещё ждать — неизвестно: запрос к серверу, подготовка отчёта. Элемент строится на классах компонента Спиннер. Если доля выполненного известна, берите Progress Bar, если известна раскладка будущего содержимого — Skeleton.

Пример

<div class="flex flex-wrap gap-6 items-cross-center">
  <sf-spinner infinite label="Загрузка…"></sf-spinner>
  <sf-spinner infinite kind="dots" size="2" label="Обновляем список"></sf-spinner>
</div>

Применение

Длительность анимации

Задавайте infinite для любого ожидания неизвестной длины: с ним анимация повторяется, пока спиннер на странице. Без него анимация проходит один цикл и останавливается.

Подпись

label — видимая подпись под изображением: что именно происходит, «Обновляем список». Без label подпись — «Загрузка…» на русской странице и «Loading…» на остальных; пустое значение тоже заменяется этой подписью, поэтому спиннер <sf-spinner> всегда подписан.

Вид и размер

kind — вид: arc — дуга, бегущая по кольцу (по умолчанию), dots — кольцо точек с волной яркости. Держите один вид во всём интерфейсе. size — ступень 1/2, 1, 2 или 3: 1/2 — внутри кнопки или поля, 2 и 3 — для целой области.

Тонкая настройка: dots — число точек (от 3 до 32), filled — сколько из них яркие, direction — clockwise или counterclockwise, width, height, stroke-width и dot-radius — размеры в пикселях. Изображение перестраивается при смене атрибутов само; refreshSpinner() перестраивает его по текущим атрибутам принудительно.

const spinner = await SF.createAsync('spinner', {
  infinite: true,
  announce: true,
  label: 'Готовим отчёт',
});
report.setAttribute('aria-busy', 'true');
report.append(spinner);

Доступность

• Подпись читается как обычный текст. Чтобы экранный диктор объявил её при появлении спиннера, задайте announce: элемент получит role="status" и aria-live="polite". Объявляйте одно ожидание на область, а не каждый спиннер в списке.
• Области, которая ждёт данных, задайте aria-busy="true" и уберите атрибут, когда загрузка закончилась; спиннер после этого удалите.
• Спиннер не получает фокус. Не ставьте его вместо кнопки на время запроса: отключите кнопку и покажите спиннер рядом или внутри неё.
• При системной настройке уменьшения движения анимация останавливается, а изображение остаётся видимым.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• size — string, по умолчанию 1, значения: 1/2, 1, 2, 3.
• width — string, по умолчанию пусто.
• height — string, по умолчанию пусто.
• label — string, по умолчанию пусто. Пусто — текст на языке страницы (по-английски «Loading…»).
• kind — string, по умолчанию arc, значения: arc, dots. Вид спиннера: дуга или ряд точек.
• dots — string, по умолчанию 16, значения: шаблон ^(?:[3-9]|[12][0-9]|3[0-2])$.
• filled — string, по умолчанию 6, значения: шаблон ^(?:[1-9]|[12][0-9]|3[0-2])$.
• stroke-width — string, по умолчанию пусто.
• dot-radius — string, по умолчанию пусто.
• infinite — boolean, по умолчанию false.
• announce — boolean, по умолчанию false.
• direction — string, по умолчанию clockwise, значения: clockwise, counterclockwise.
• root-class — string, по умолчанию пусто.

Прежние имена:

Методы

• getSpinnerRoot() — возвращает object | null. Возвращает внутренний корень индикатора загрузки (.sf-loader-container) или null до отрисовки.
• refreshSpinner() — возвращает object. Перерисовывает привязанный корень индикатора загрузки по его текущей конфигурации; до привязки ничего не делает.

События

Своих событий нет; общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

Доступность

• Роль: status, если announce равно true и label не пуст; иначе без роли виджета.
• Доступное имя: рекомендуется.
• Фокус: Спиннер не интерактивен и никогда не попадает в порядок фокуса.

Минимальная разметка

<sf-spinner infinite announce label="Loading"></sf-spinner>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/spinner
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-spinner

См. также

• Спиннер — спиннер на классах.
• Progress Bar — ход процесса с известной долей.
• Skeleton — место будущего содержимого.