Components
Progress
Displays an indicator showing the completion progress of a task, such as a file upload or a multi-step form.
Basic usage
Pass a value between 0 and 100 to set how full the bar is.
Values
The indicator animates to the supplied value. An empty bar is 0 and a full bar is 100.
With a label
Progress bars carry no visible text on their own. Pair the bar with a heading and a percentage to give it context.
Uploading files72%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Completion percentage from 0 to 100 that drives the width of the indicator. |
max | number | 100 | Maximum value the progress can reach. Inherited from the Radix Progress root. |
className | string | — | Additional Tailwind classes to merge onto the track — e.g. set a custom height. |
...rest | ProgressPrimitive.Root props | — | All Radix Progress root props are forwarded to the underlying element. |
Accessibility
- Built on Radix Progress, the root element has
role="progressbar"witharia-valuenow,aria-valuemin, andaria-valuemaxset automatically. - Provide an accessible name with
aria-labeloraria-labelledbypointing at a visible heading so screen readers can announce what is loading. - The track and indicator are presentational; convey the percentage in adjacent text rather than relying on color alone.
- Avoid using a progress bar as the sole feedback for very long operations — pair it with a live region announcement when the value changes significantly.