role progressbar
Progress bar draft v0.1.0
Shows how far a task has progressed, or that it is in progress when its length is unknown.
A progress bar fills a track from start to end as a task advances: an upload, an export, the steps of a setup. It has a visible label naming the task and, when the progress can be measured, an optional value in percent. When the length is unknown, the bar is indeterminate: a segment moves along the track to say that something is happening. It only reports: a progress bar is never a control.
Decisions
From decisions in packages/components/specs/components/progress-bar.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.
Color
-
The track is the third neutral base fill (global.bg.base.neutral.3) and the indicator the accent brand fill, in every mode; the label is primary text and the value secondary text.
The Figma library maps no color to progress; the brand fill keeps 3:1 against the neutral track in both modes (WCAG 1.4.11).
track-and-indicator-colors· 2026-10-03 · v0.1.0progress-bar.track.backgroundprogress-bar.indicator.backgroundprogress-bar.label.colorprogress-bar.value.color
Size
-
Two track thicknesses from the space scale, 4 px (small) and 8 px (medium, the default), fully rounded; the label is 14 px medium and the value 14 px regular.
sizes· 2026-10-03 · v0.1.0progress-bar.track.height.*progress-bar.track.border-radiusprogress-bar.indicator.border-radiusprogress-bar.label.typographyprogress-bar.value.typography
Motion
-
A determinate bar animates its length with the normal duration and the standard easing; the indeterminate segment sweeps the track in six times the normal duration (1.5 s), forever, and stops under reduced motion. The six-fold factor is written in the CSS because the additions have no long duration token: a decision to take.
indeterminate-motion· 2026-10-03 · v0.1.0progress-bar.indicator.transition.*WCAG 2.3.3 Animation from Interactions (AAA)WCAG 2.2.2 Pause, Stop, Hide (A)