Loading navigation…
User
API and Development
Progress displays a visual indicator of task completion, file upload progress, or any process that advances over time. It provides a flexible progress bar interface supporting both value-based and duration-based animations, with optional labels and percentage displays. Built on Radix UI's Progress component, it ensures consistent progress indicators across the interface with smooth animations and accessibility support.
| Name | Default | Description |
|---|---|---|
value | 0 | Progress value from 0-100. Do not use with duration. |
duration | Simulate progress bar filling up over a given duration in milliseconds (e.g., 3000). Do not use with value. | |
label | Optional label text displayed above or beside the progress bar. | |
showPercentage | false | Whether to show the percentage label alongside the progress bar. |
Use for simple progress indication without labels.
Control progress using a specific value from 0 to 100.
Animate progress automatically over a specified duration.
The progress bar automatically fills from 0% to 100% over the specified duration (3 seconds in this example).
Add a descriptive label to explain what progress is being shown.
Display the percentage value alongside the progress bar.
Combine label and percentage for complete context.
Use duration-based progress for indeterminate or simulated progress.
Update progress based on external events or data.
Display multiple progress indicators together.
Display progress at the beginning of a process.
Display progress near completion.
Show completed state.