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
Component Source
<Progress size="sm" value={30} />
<Progress size="md" value={30} />Values
Component Source
<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
Component Source
// 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
Component Source
// 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 | Description |
|---|---|---|---|
| value | number | null | — | 0-100 percentage. When omitted or set to null, progress operates in indeterminate loading mode. |
| indeterminate | boolean | — | Force indeterminate infinite sliding animation. |
| showValue | boolean | false | Display numeric percentage indicator. @default false |
| valueFormat | (value: number) => string | (v) | Custom formatter function for numeric indicator. @default (v) => `${Math.round(v)}%` |
| label | string | — | Title or label text displayed above or alongside the progress bar. |
| labelPosition | "top" | "right" | right | Position of numeric indicator & label ("top" header row or "right" side-by-side). @default "right" |
| className | string | — | — |
| variant | "bar" | "top-bar" | "bar" | — |
| size | "sm" | "md" | "md" | — |