Progress Bar
A 6px determinate progress track. Deep-blue fill (--shade/primary/900) over a light-blue track (--brand/primary/200), 8px radius.
State
Fill from 0% to 100%, plus a Disabled track (--grey/200, no fill).
Variation
Bar only, or with a label to the left / right of the track. Label is Inter 14px --grey/600.
Interactive
Drag to update the fill and the trailing label.
Token Reference
| Token | Value | Usage |
|---|---|---|
| --shade/primary/900 | #0d00fa | Fill |
| --brand/primary/200 | #99c2e9 | Track |
| --grey/200 | #ececec | Disabled track |
| --grey/600 | #5e5e5e | Label text (Inter 14px) |
| Height · Radius | 6px · 8px | Track dimensions |