components
Progress
A determinate progress bar built on Radix Progress, for reading, streak, and year completion. The fill animates with a calm ease-out and respects reduced motion.
Basic
With label
Year of scripture66%
Reading streak40%
Sizes
Two heights for different densities.
Tones
Values
Empty0%
Half50%
Almost done92%
Complete100%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | none | Current value, from 0 to max. |
| max | number | 100 | Upper bound. |
| tone | Tone | primary | Fill color intent. |
| size | "sm" | "md" | md | Bar height. |
| label | string | none | Label shown above the bar. |
| showValue | boolean | false | Show rounded percentage beside the label. |
| aria-label | string | none | Accessible name when no visible label is given. |