Progress
A horizontal bar that fills as work completes.
Basic
Place a .progress__track with a single .progress__bar inside .progress. The wrapper carries role="progressbar" and the aria value attributes; the bar paints the fill via inline width. Add .progress__label and .progress__value to caption it.
Intents
Recolor the fill with an intent modifier on .progress__bar. The track stays neutral so contrast holds in both themes.
Sizes
Default is a thin strip; --sm compresses to a hairline; --lg grows to a label-friendly height.
Animated
Add .progress__bar--animated for a soft sheen that sweeps across the fill every few seconds — a quiet "still working" signal. Dropped under reduced-motion.
Indeterminate
Add data-indeterminate on .progress when the duration is unknown. A partial bar slides across the track on loop; drop the inline width (the CSS owns it) and skip aria-valuenow so assistive tech announces it as indeterminate.
Customization
These variables retune .progress. Override on the element, a parent scope, or :root. The track is pilled by default; set --progress-radius to flatten.
| Variable | Use |
|---|---|
--progress-height | Track height; size modifiers reassign this |
--progress-radius | Track corner radius; pilled by default |
--progress-header-gap | Space between the caption row and the track |
--progress-bg | Track background (unfilled portion) |
--progress-bar-bg | Bar fill (intent modifiers retune) |
--progress-bar-transition-duration | Width tween when the value changes |
--progress-label-font-size | Caption font size |
--progress-label-font-weight | Label weight |
--progress-label-color | Label text color |
--progress-value-color | Value text color |
--progress-shimmer-color | Animated sheen color |
--progress-shimmer-duration | Animated cycle length |
--progress-indeterminate-duration | Indeterminate sweep cycle length |