Progress
Show how far along a task is, or that it is still running when nobody can tell how long it will take.
Installation
You can add the progress components using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add progressUsing a shared UI package or custom import aliases? Configure your installation paths before running the CLI. Copy-paste examples use the default imports.
Anatomy
ProgressBar pairs a label and its value with a rounded rail, the one the agent limits card uses. The fill slides to each new value rather than resizing, so it eases smoothly however often the value changes.
With isIndeterminate, a band of light sweeps the rail instead, drawn like Spinner: a crisp core with a rounded head, a tight glow, and a wide bloom that spills just past the rail, the sharp head always in front.
Sizes
Three rail thicknesses. Without a visible label, name the bar with aria-label.
<ProgressBar aria-label="Small" size="sm" value={30} /> // 4px<ProgressBar aria-label="Medium" size="md" value={55} /> // 6px, the default<ProgressBar aria-label="Large" size="lg" value={80} /> // 8pxCircle
ProgressCircle fits a file tile or a table cell. Its indeterminate state is Spinner's orbiting light at the same size.
import { ProgressCircle } from "@/components/base/progress/progress";
<ProgressCircle aria-label="Upload" size="sm" value={64} /> // 16px<ProgressCircle aria-label="Upload" size="md" value={64} /> // 24px, the default<ProgressCircle aria-label="Upload" size="lg" value={64} /> // 32px<ProgressCircle aria-label="Syncing" size="lg" isIndeterminate />Value label
The value shows as a percentage, formatted for the reader's locale. Count steps with value and maxValue, write your own text with valueLabel, or format money and units with formatOptions.
<ProgressBar label="Onboarding" value={3} maxValue={5} valueLabel="3 of 5 steps" />
<ProgressBar label="Monthly goal" value={8420} maxValue={12000} formatOptions={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }}/>Right-to-left
Inside DirectionProvider, the fill grows from the right and the indeterminate light sweeps from right to left.
import { DirectionProvider } from "@/components/foundations/direction/direction";
<DirectionProvider locale="ar"> <ProgressBar label="جارٍ رفع التقرير" value={64} /> <ProgressBar label="جارٍ تجهيز التصدير" isIndeterminate /></DirectionProvider>Accessibility
Both shapes are announced as progress bars with their label and value; an indeterminate one is announced without a value. Reduced motion slows the sweep and stops the fill from easing.