Progress
Sourcecomponents/Progress.astro
Progress bar
A thin violet fill over a rounded grey track, with an optional label beneath. Drive it with value / max (e.g. a quiz step) or an explicit percent.
value=2 · max=6
Question 2 of 6
Amounts
Steps along the way — the fill animates as the value changes.
0 · 25 · 50 · 75 · 100%
On dark
White track on dark sections — surface="dark".
surface="dark"
Question 2 of 6
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | 0 | Current step / amount. |
max | number | 100 | Total. |
percent | number | — | Explicit 0–100 override (ignores value/max). |
label | string | — | Caption beneath the bar (overrides the default). |
showLabel | boolean | false | Show the default "value of max" caption. |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
Usage
Pass label for custom text, or showLabel for the default "value of max".
<!-- Quiz step -->
<Progress value={2} max={6} label="Question 2 of 6" />
<!-- Percentage -->
<Progress percent={75} showLabel />Rules
Do
Use it to show how far through a flow someone is — a quiz, a form, upload.
Pair it with a clear label so the numbers are legible.
Don't
Use it for an indeterminate wait — that wants a spinner, not a bar.
Animate it backwards — progress only moves forward.