Shows how far along a task is, as a bar or a ring.
import { Progress } from "@/fragments/ui";Source<Progress value={60} label="Uploading…" showValue />npx @usefragments/cli add progressWrites src/fragments/ui/components/Progress plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Progress is a compound: import the root and reach its parts through dot notation.
Progress.CircularColour carries state: normal, done, tight, critical.
import { Stack } from '@/components/Stack';
<Stack direction="column" gap="md">
<Progress value={75} tone="accent" label="Processing" showValue />
<Progress value={100} tone="success" label="Complete" showValue />
<Progress value={80} tone="warning" label="Almost full" showValue />A reading where hitting the top is not a win.
<Progress
value={42}
tone="neutral"
role="meter"
label="Seats used"
showValueThin for table rows, thick when the bar is the point.
import { Stack } from '@/components/Stack';
<Stack direction="column" gap="md">
<Progress value={50} size="sm" label="Small" />
<Progress value={50} size="md" label="Medium" />
<Progress value={50} size="lg" label="Large" />value={null} sweeps instead of filling.
<Progress value={null} label="Loading…" />Same value in a ring, for tiles and compact chrome.
import { CircularProgress } from '@/components/Progress';
import { Stack } from '@/components/Stack';
<Stack direction="row" gap="lg" align="center">
<CircularProgress value={25} size="sm" />
<CircularProgress value={50} size="md" showValue />Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | Current progress value (0-100). Null for indeterminate. |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
size | enumsmmdlg | md | Size of the progress bar |
tone | enumaccentneutralsuccesswarningdanger | accent | Colour. accent is the plain bar; neutral reads as a meter whose maximum is not a success; success, warning and danger carry state. |
label | string | Not set | Label text above the progress bar |
showValue | boolean | false | Show percentage value |
formatValue | function | Not set | Custom formatter for displayed progress value |
role | union | Not set | — |