Progress
Progress
A Radix Progress.Root — a determinate progress bar. value correctly forwards through to aria-valuenow, so screen readers announce real progress, not a silent bar.
import { Progress } from "@pompeitech/vesuvius-ui";Default
Different values
Animated
value is a plain number, so animating it is just React state on a timer — the bar's fill transition is CSS, not driven by any internal animation loop:
API
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | 0 | Current progress, 0–max. null renders an indeterminate-looking empty track and sets aria-valuenow to nothing, per the ARIA progressbar spec. |
max | number | 100 | The value that represents 100% complete. |
Plus every other native <div> prop on the root.
Accessibility
Renders role="progressbar" with aria-valuenow/aria-valuemin/aria-valuemax wired automatically from value/max — no manual ARIA attributes needed. Pair it with a visible label (a heading, or aria-label/aria-labelledby) describing what is progressing; the bar itself only conveys how much.