Progress
Смуга прогресу з визначеним і невизначеним станами.
Приклад
Значення: 64 — рухайте повзунком нижче.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
modelValue | number | null | Прогрес 0–max. `null` — невизначений стан (смуга бігає). |
size | smmd | "sm" | Товщина смуги. |
label | string | undefined | Доступна назва. Обов'язкова, якщо поруч немає видимого підпису. |
max | number | 100 | Максимум шкали. |
tone | accentsuccesswarningdanger | "accent" | Колір смуги. `accent` — звичайний перебіг; статусні тони — коли смуга сама є повідомленням: квота на 90% — `warning`, невдалий upload — `danger`. |
showValue | boolean | false | Показати числове значення праворуч від підпису. |
Коли використовувати
Коли процес має ВИМІРЮВАНИЙ хід: завантаження, імпорт, батч-операції.
modelValue: null — для стану «щось відбувається, скільки — невідомо».
Коли НЕ використовувати
Для очікування відповіді сервера в кнопці є loading у Button — смуга
поруч із кнопкою дублює стан і додає шум.
Невизначений стан не залишайте надовго: через ~5 с користувач перестає вірити, що щось відбувається. Покажіть текст або дозвольте скасувати.
Доступність
role="progressbar" з aria-valuemin/max/now. Під prefers-reduced-motion
невизначена смуга не застигає за межами контейнера, а стає статичною
напівпрозорою смугою.
Тон accent фарбує смугу токеном --accent, а не --accent-solid. Смуга —
графічний об'єкт, і від доріжки вона мусить відрізнятися на 3:1 (WCAG
1.4.11). У темній темі accent-solid на доріжці давав 2.6:1 — заповнену
частину ледве видно; accent тримає 5.3:1 в обох темах.