Progress
FREELinear and circular progress with an animated fill, labels, localized values and an indeterminate mode.
Installation
Terminal
npx @bloxa/cli add progress
# or: npx shadcn@latest add @bloxa/progressPackages installed automatically: motion, radix-ui
Examples
Size, tone and value
Storage64 / 100 GB
Quota88%
Live and indeterminate
value={null} is indeterminate; once values arrive the fill animates.
Preparing…
Circle
25%
60%
92%
7/10
API reference
Every component also accepts the props of the element it renders.
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | null | Current value; null is indeterminate. |
| max | number | 100 | Maximum value. |
| size | "sm" | "md" | "lg" | "md" | Height and text size. |
| tone | "accent" | "foreground" | "destructive" | "accent" | Fill color. |
| label | ReactNode | — | Text above the bar, left. |
| showValue | boolean | false | Show the formatted value on the right. |
| formatValue | (value, max) => string | — | Custom value text; defaults to a localized percent. |
ProgressCircle
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value. |
| size | number | 64 | Diameter in px. |
| thickness | number | 6 | Ring thickness in px. |
| showValue | boolean | ReactNode | true | Value in the center, or your own node. |
| label | string | — | Accessible name. |