05 · Components · Stable

Progress Bar

Индикатор прогресса для операций с известным или неизвестным процентом завершения. Два режима: determinate (0–100%) и indeterminate (анимированный). Пять validation-состояний, два размера, три позиции лейбла.

Determinate — Validations

None · Info · Positive · Warning · Negative
None
0%
25%
50%
75%
100%
Info
25%
50%
75%
100%
Positive
25%
50%
75%
100%
Warning
25%
50%
75%
100%
Negative
25%
50%
75%
100%

Indeterminate

SM · MD · анимация 1.5s
SM — 2px
MD — 4px

Fill — --ds-progress-fill-indeterminate = var(--ds-surface-info-accent). Всегда синий, без validation states. prefers-reduced-motion: анимация отключается.

Позиции лейбла

none · right · bottom
label=none

Только бар. % выводится внешним элементом.

label=right
60%

% справа на одной строке. Ширина лейбла 32px — бар не скачет.

label=bottom
Загрузка файлов 60%

Caption слева, % справа. Caption опциональный.

Размеры

SM (2px) · MD (4px)
SM — height 2px · gap 2px · L1 dim-25
65%
MD — height 4px · gap 4px · L1 dim-50
65%

Dark theme

--ds-neutral-fill флипает на #FFFFFF
65%
65%
65%
65%
65%
Обработка транзакции50%

Токены компонента

14 custom properties
Токен
Light
Dark
--ds-progress-sm-h
2px (L1 dim-25)
2px
--ds-progress-md-h
4px (L1 dim-50)
4px
--ds-progress-sm-gap
2px
2px
--ds-progress-md-gap
4px
4px
--ds-progress-track
--ds-nba-30 · rgba(174,181,189,.30)
--ds-nba-30 dark · rgba(145,152,157,.40)
--ds-progress-fill-none
--ds-neutral-fill · #222629
explicit #FFFFFF (override)
--ds-progress-fill-info
--ds-surface-info-accent · #5475F8
#5475F8
--ds-progress-fill-positive
--ds-pos-default · #2c9205
--ds-pos-default dark
--ds-progress-fill-warning
--ds-warn-fill · #F4A800
--ds-warn-fill dark
--ds-progress-fill-negative
--ds-neg-hover · #d70000
--ds-neg-hover dark
--ds-progress-fill-indeterminate
--ds-surface-info-accent · #5475F8
#5475F8
--ds-progress-indeterminate-dur
1.5s
1.5s

Правила использования

Determinate · Indeterminate · A11y
Determinate

Когда известен % завершения

  • Загрузка файла — пользователь видит точный прогресс
  • Многошаговая форма — шаг 3 из 5 = 60%
  • Импорт/экспорт данных — label=bottom + caption
  • validation=positive при 100% для visual confirmation
  • validation=negative при ошибке в середине процесса
Indeterminate

Когда % неизвестен

  • Авторизация, обновление данных — async без счётчика
  • Top of page bar — SM (2px) ненавязчивый индикатор
  • Всегда с aria-busy="true" на контейнере операции
  • Не использовать вместо Spinner в кнопках — там Spinner
ARIA паттерн

Доступность

  • Determinate: role="progressbar" + aria-valuenow + aria-valuemin="0" + aria-valuemax="100"
  • Indeterminate: role="progressbar" + aria-busy="true" + aria-label="Загрузка"
  • prefers-reduced-motion: анимация останавливается, fill зафиксирован на 40%
Ограничения

Чего избегать

  • Не показывать несколько bars без чёткой иерархии
  • Не использовать validation=none для success — смени на positive
  • caption без label=bottom не отображается
  • SM (2px) малозаметен — не использовать как primary feedback

State Explorer

Интерактивный тест состояний — переключай и смотри