Перейти до вмісту
tatetUI

Spinner

Індикатор очікування без відомої тривалості — у кнопці, рядку списку чи на місці панелі.

Коло з дугою, що обертається. Колір типово береться з тексту батька (tone="current"), тож усередині суцільної кнопки спінер сам стає білим, а в приглушеному рядку — приглушеним, без жодного props.

Синхронізація

Замовлення за вересень

Оновлено щойно

Завантаження звіту

Спінер, скелетон чи прогрес

  • Skeleton — коли відома форма того, що завантажується: список, картка, таблиця. Сітка не перебудовується в момент приходу даних.
  • Progress / ProgressRing — коли відомо, скільки лишилось: upload, імпорт, пакетна операція.
  • Spinner — коли не відомо ні форми, ні тривалості: оновлення рядка, перевірка поля, короткий запит.

API

Props

НазваТипТиповоОпис
labelstringundefinedЩо саме вантажиться: «Завантаження замовлень». Із ним спінер стає `role="status"`; без нього — декоративний (`aria-hidden`), і стан має оголошувати контейнер (`aria-busy`) або текст поруч.
toneaccentcurrentmuted"current"Колір. `current` успадковує колір тексту батька — усередині суцільної кнопки спінер сам стає білим, у приглушеному рядку — приглушеним.
sizemdsmxslg"sm"Діаметр. `xs`/`sm` — усередині рядка тексту, кнопки чи комірки таблиці; `md` — у картці; `lg` — на місці вмісту панелі.
showLabelbooleanfalseПоказати `label` видимим текстом праворуч від кола.

Коли використовувати

  • Коротке очікування (до кількох секунд) на місці конкретного елемента: іконка кнопки «Оновити», статус рядка, перевірка унікальності поля.
  • Завантаження панелі, форма вмісту якої невідома заздалегідь.

Коли НЕ використовувати

  • Для кнопки, що надсилає форму, — у UiButton вже є loading, який ще й зберігає ширину кнопки.
  • Для списків і карток — скелетон повторює геометрію і не змушує сторінку стрибати.
  • Для довгих процесів. Через ~5 с спінер перестає переконувати, що щось відбувається: покажіть прогрес або дайте скасувати.

Доступність

Без label спінер декоративний (aria-hidden): стан завантаження має оголошувати контейнер через aria-busy або текст поруч. З label він стає role="status" з текстом — видимим (showLabel) або лише для скрінрідера.

Live-регіон, що з'являється разом зі своїм текстом, скрінрідери часто пропускають: оголошення надійне лише тоді, коли регіон існував ДО зміни. Якщо завантаження важливо оголосити, тримайте постійний контейнер із role="status" і міняйте його текст, а спінер лишіть декоративним.

Під prefers-reduced-motion обертання зупиняє глобальний вимикач — так само, як у Progress і LoadingDots. Щоб застигле коло не читалося як звичайна іконка, дуга тоді подовжується до трьох чвертей — впізнаваний статичний гліф очікування.