Progress

Progress сообщает о выполнении продолжающейся задачи или операции.

Обзор

Стили Progress разделены между корневой поверхностью полосы и видимым заполнением, а анимация неопределённого состояния задаётся на уровне корня.

Публичные CSS-переменные

Uploading report.pdf64%

Переменная	Значение	Влияет на
Толщина полосы.`Progress`, `ProgressTrack`		В этом состоянии изменений не видно
Текущее значение.`ProgressTrack`		В этом состоянии изменений не видно
Максимум диапазона.`ProgressTrack`		В этом состоянии изменений не видно
Цвет заполнения.`ProgressTrack`		В этом состоянии изменений не видно
Коэффициент радиуса полосы.`Progress`		В этом состоянии изменений не видно
Толщина заполнения, по умолчанию равна высоте полосы.`ProgressTrack`		В этом состоянии изменений не видно
Коэффициент радиуса заполнения.`ProgressTrack`		В этом состоянии изменений не видно
Ширина заполнения у неопределённой полосы.`ProgressTrack`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Progress: размер корня, фоновая поверхность и неопределённый режим.
ProgressTrack: ширина заполнения, цвет и анимация.

Взаимодействие состояний и вариантов

size меняет высоту полосы.
variant меняет цвет заполнения.
indeterminate переключает поведение ширины и анимации.

Примеры

.compactProgress {
  --progress-height: 4px;
}

.brandProgress {
  --progress-track-color: var(--color-primary-500);
}

Не переопределяйте

Не используйте выдуманные определённые значения, когда задача на самом деле неопределённая.
Не снижайте контраст настолько, что полосу становится трудно читать.
Не путайте стили прогресса с семантикой meter.