Displays a progress bar related to a task.
<Progress />
| Prop | Type | Default |
|---|---|---|
value | number | |
duration | string | "5s" |
This component inherits props from the Radix Progress primitive and supports common margin props m, mx, my, ml, mr, mt, mb. View source
Use the value prop to provide a precise indication of the task progress.
<Progress value={75} />
Use the duration prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.
<Progress duration="30s" />
When an approximate duration can be estimated, the Progress component is still useful over Spinner, which doesn’t provide any visual cues towards the progress of the task.