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

Progress

Смуга прогресу з визначеним і невизначеним станами.

Приклад

Завантаження файлів64%
Обробка запиту…

Значення: 64 — рухайте повзунком нижче.

API

Props

НазваТипТиповоОпис
modelValuenumbernullПрогрес 0–max. `null` — невизначений стан (смуга бігає).
sizesmmd"sm"Товщина смуги.
labelstringundefinedДоступна назва. Обов'язкова, якщо поруч немає видимого підпису.
maxnumber100Максимум шкали.
showValuebooleanfalseПоказати числове значення праворуч від підпису.

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

Коли процес має ВИМІРЮВАНИЙ хід: завантаження, імпорт, батч-операції. modelValue: null — для стану «щось відбувається, скільки — невідомо».

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

Для очікування відповіді сервера в кнопці є loading у Button — смуга поруч із кнопкою дублює стан і додає шум.

Невизначений стан не залишайте надовго: через ~5 с користувач перестає вірити, що щось відбувається. Покажіть текст або дозвольте скасувати.

Доступність

role="progressbar" з aria-valuemin/max/now. Під prefers-reduced-motion невизначена смуга не застигає за межами контейнера, а стає статичною напівпрозорою смугою.