Спиннер

Спиннер показывает, что операция выполняется, когда процент завершения неизвестен. Если процент известен, берите индикатор прогресса; для формы или карточки с предсказуемой геометрией лучше подходит скелетон.

Пример

<div class="sf-loader-container sf-loader--size-1" data-variant="arc" data-infinite="true" data-label="Загрузка списка"></div>

Разметка

Минимальная разметка — один пустой блок sf-loader-container с атрибутами. Изображение и подпись скрипт компонента достраивает сам: часть sf-loader--loading-indicator или sf-loader--circles с SVG и подпись sf-loader--text.

• data-infinite="true" повторяет анимацию, пока спиннер на странице. Без него анимация проходит один цикл и останавливается, поэтому для ожидания неизвестной длительности атрибут обязателен.
• data-label — видимая подпись под изображением. Пустой data-label или его отсутствие скрывает спиннер от экранного диктора.
• Блок выравнивает содержимое по центру своей ширины.
• Тонкая настройка: data-dots (число точек, от 3 до 32), data-filled (число ярких точек), data-direction (clockwise или counterclockwise), data-width, data-height, data-stroke-width и data-dot-radius в пикселях. Цвет задаёт переменная --sf-loader--color.

Варианты

Вид

data-variant="arc" рисует дугу, которая бежит по кольцу, — вид по умолчанию. data-variant="dots" рисует кольцо точек, по которому бежит волна яркости. Держите один вид во всём интерфейсе.

<div class="flex flex-wrap items-end gap-4">
  <div class="flex flex-col items-center gap-1">
    <div class="sf-loader-container sf-loader--size-1" data-variant="arc" data-infinite="true" data-label=""></div>
    <code class="text-1/2 color-on-surface-variant">data-variant="arc"</code>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="sf-loader-container sf-loader--size-1" data-variant="dots" data-infinite="true" data-label=""></div>
    <code class="text-1/2 color-on-surface-variant">data-variant="dots"</code>
  </div>
</div>

Размер

Четыре ступени — sf-loader--size-1/2, sf-loader--size-1, sf-loader--size-2 и sf-loader--size-3 — меняют диаметр, толщину линии и кегль подписи. Берите наименьший размер, который остаётся заметным: 1/2 — внутри кнопки или поля, 2 и 3 — для целой области.

<div class="flex flex-wrap items-end gap-4">
  <div class="flex flex-col items-center gap-1">
    <div class="sf-loader-container sf-loader--size-1/2" data-variant="arc" data-infinite="true" data-label=""></div>
    <code class="text-1/2 color-on-surface-variant">sf-loader--size-1/2</code>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="sf-loader-container sf-loader--size-1" data-variant="arc" data-infinite="true" data-label=""></div>
    <code class="text-1/2 color-on-surface-variant">sf-loader--size-1</code>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="sf-loader-container sf-loader--size-2" data-variant="arc" data-infinite="true" data-label=""></div>
    <code class="text-1/2 color-on-surface-variant">sf-loader--size-2</code>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="sf-loader-container sf-loader--size-3" data-variant="arc" data-infinite="true" data-label=""></div>
    <code class="text-1/2 color-on-surface-variant">sf-loader--size-3</code>
  </div>
</div>

Доступность

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

JavaScript

Скрипт компонента находит блоки .sf-loader-container при загрузке страницы и в добавленной позже разметке. После изменения атрибутов перерисуйте спиннер через SF.Spinner.render(element).

Компонент регистрирует класс Spinner. SF.Loader появляется к событию sf-loader-init на window; SF.Loader.ready('Spinner', callback) передаёт класс, когда он зарегистрирован.

const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));

whenLoader(() => SF.Loader.ready('Spinner', (Spinner) => {
  const spinner = new Spinner({param: {variant: 'dots', label: 'Загрузка', infinite: true}});
  document.querySelector('#results').append(spinner.render());
}));

Параметры повторяют атрибуты: variant, label, infinite, announce, dots, filled, direction, width, height, strokeWidth, dotRadius. Подпись по умолчанию — Loading...; задайте свою. Без width и height диаметр собранного спиннера задаёт класс размера; параметры задают его явно. Событий компонент не отправляет.

Классы

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-loader); переменную без него задают только модификаторы.

См. также

• Прогресс
• Скелетон
• Spinner — Smart-компонент