ProgressRing
Круговий прогрес для щільних місць — від 24px у рядку до великого кільця на дашборді.
Та сама шкала, що в UiProgress, — modelValue, max, tone,
невизначений стан через null — але в колі. Смуга потребує ширини; кільце
вміщається там, де ширини немає: у рядку таблиці, у картці поруч із
цифрою, на аватарі кроку онбордингу.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
modelValue | number | null | Прогрес 0–max. `null` — невизначений стан (дуга обертається). |
size | number | 48 | Діаметр кільця в пікселях. |
label | string | undefined | Доступна назва. Обов'язкова, якщо поруч немає видимого підпису. |
max | number | 100 | Максимум шкали. |
tone | accentsuccesswarningdanger | "accent" | Колір дуги — ті самі тони, що в UiProgress: статусний тон, коли кільце саме є повідомленням (квота на 90% — `warning`). |
thickness | number | undefined | Товщина кільця в пікселях. Типово — десята частина діаметра, але не тонше 3px: тонша дуга на 24px-індикаторі губиться. |
showValue | boolean | false | Відсоток у центрі кільця. Від діаметра 40px — менше в кільце число не вміщається читабельним. |
Слоти
| Назва | Опис |
|---|---|
default | Власний вміст центру: іконка, «3/5», короткий підпис. |
Коли використовувати
- Прогрес одного об'єкта в щільному місці: заповнення профілю, квота, використаний контекст, крок онбордингу («3/5» у центрі через слот).
- Ключова частка на дашборді, коли саме кільце — головна графіка картки.
Коли НЕ використовувати
- Для порівняння кількох величин. Кільця погано порівнюються на око — п'ять смуг одна під одною читаються швидше за п'ять кілець поруч.
- Для завантаження без відомої частки довше кількох секунд — див. розділ про вибір індикатора на сторінці Spinner.
Доступність
role="progressbar" з aria-valuemin/max/now і назвою з label. У
невизначеному стані aria-valuenow немає зовсім — саме так специфікація
відрізняє «невідомо скільки» від «нуль».
Відсоток у центрі (showValue) має aria-hidden: значення вже несе
aria-valuenow, і дубль прозвучав би двічі. Центр показується лише від
діаметра 40px — менше число в кільце читабельним не вміщається.
Геометрія рахується в пікселях самого кільця, а не у фіксованому
viewBox: товщина — справжні пікселі за будь-якого діаметра, тож 3px на
24px і 3px на 96px виглядають однаково. Під prefers-reduced-motion
невизначене кільце не застигає «на чверті» (що читалося б як 25 %), а стає
повним і напівпрозорим — той самий прийом, що в UiProgress.