Progress

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.