Progress
Loading and task progress bar built on Radix Progress primitive supporting determinate percentages and indeterminate loading states.
// Radix — @radix-ui/react-progress
import { Progress } from "@shavin/ui";Sizes
<Progress size="sm" value={30} />
<Progress size="md" value={30} />Values
<Progress value={10} />
<Progress value={50} />
<Progress value={90} />
<Progress value={100} />Numeric Indicator & Labels (showValue)
65%
Uploading files...
75%
Storage space
4 of 10 GB used
// Inline side-by-side percentage indicator
<Progress value={65} showValue />
// Header row label & percentage indicator (labelPosition="top")
<Progress value={75} label="Uploading files..." showValue labelPosition="top" />
// Custom value formatter function (valueFormat)
<Progress value={40} showValue valueFormat={(v) => `${v / 10} of 10 GB used`} label="Storage space" labelPosition="top" />Indeterminate & Top Loading Bar
Indeterminate Bar
Panel with sticky top loading bar
// Indeterminate continuous loading bar
<Progress indeterminate />
// Top-aligned loading bar (fixed to top edge or top of panel)
<Progress variant="top-bar" indeterminate />Props
| Prop | Type | Default |
|---|---|---|
| value | number | null | — |
| indeterminate | boolean | — |
| showValue | boolean | — |
| valueFormat | (value: number) => string | — |
| label | string | — |
| labelPosition | "top" | "right" | — |
| className | string | — |
| variant | "bar" | "top-bar" | "bar" |
| size | "sm" | "md" | "md" |