Progress
A linear bar that shows how far a task has got — an upload, an export, an onboarding checklist. Without a value it becomes an indeterminate loading bar.
<Progress aria-label="Upload" value={64} />Import
import { Progress } from "@merid/react";Examples
Sizes
sm 4px, md 6px (default), lg 8px thick.
<Progress aria-label="Small" size="sm" value={40} />
<Progress aria-label="Medium" size="md" value={60} />
<Progress aria-label="Large" size="lg" value={80} />Indeterminate
Omit value (or pass null) when the duration is unknown.
<Progress aria-label="Preparing export" />Custom max and value text
max changes the scale; valueText replaces the default percentage that screen readers announce.
<Progress aria-label="Onboarding" value={3} max={5} valueText="3 of 5 steps" />Updating
Values are clamped between 0 and max. The bar reaches data-state="complete" at 100%.
const [value, setValue] = useState(0);
// update value as work completes
<Progress aria-label="Syncing" value={value} />API reference
Renders a div with role="progressbar"; the ref and other div attributes are forwarded.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | null | Current value. Omit or pass null for an indeterminate bar. |
max | number | 100 | Maximum value. Non-positive values fall back to 100. |
size | "sm" | "md" | "lg" | "md" | Bar thickness: sm 4px, md 6px, lg 8px. |
valueText | string | – | Human-readable value for AT, e.g. "3 of 5 steps". Defaults to the percentage. |
Styling
| Hook | Values |
|---|---|
.mrd-progress | Track |
.mrd-progress__bar | Filled bar |
data-size | sm · md · lg |
data-state | loading · complete · indeterminate |
Component variables: --mrd-progress-height (set per size) and --mrd-progress-value (the fill percentage, set inline).
Accessibility
role="progressbar"witharia-valuemin,aria-valuemax,aria-valuenowandaria-valuetext. In the indeterminate state noaria-value*attribute is set.- Always name the bar with
aria-labeloraria-labelledby— the element has no text of its own. - Under
prefers-reduced-motionthe indeterminate animation is removed.
Guidelines
Do
Use a determinate bar when you can measure progress, and pair it with a visible label of what is happening.
Avoid
Fake progress with a timer that stalls at 99% — use the indeterminate bar or a Spinner.