Progress

Progress communicates completion of an ongoing task or operation.

Overview

Progress styling is split across the root bar surface and the visible track fill, with optional indeterminate animation at the root level.

Public CSS Variables

Uploading report.pdf64%

Variable	Value	Affects
Bar thickness.`Progress`, `ProgressTrack`		No visible change in this state
Current value.`ProgressTrack`		No visible change in this state
Maximum range.`ProgressTrack`		No visible change in this state
Fill color.`ProgressTrack`		No visible change in this state
Radius ratio of the bar.`Progress`		No visible change in this state
Fill thickness, defaults to the bar height.`ProgressTrack`		No visible change in this state
Radius ratio of the fill.`ProgressTrack`		No visible change in this state
Fill width of the indeterminate bar.`ProgressTrack`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Progress: root size, background surface, and indeterminate mode.
ProgressTrack: fill width, color, and animation.

State And Variant Interaction

size changes bar height.
variant changes track color.
indeterminate switches width and animation behavior.

Examples

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

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

Do Not Override

Do not use fake determinate values when the task is really indeterminate.
Do not remove enough contrast that the track becomes hard to read.
Do not confuse progress styling with meter semantics.