The progress component is useful for indicating to users that a working action or task is taking place in the background. Both linear and circular progress bars are separate components.
Progress Circular
Circular progress is used for more direct processes, such as inside of buttons that are processing an action (like saving), inside of table cells that are loading unique data or for modal and dialogue boxes when an action is taking place.
Progress Linear
Linear progress can be used for loading content on screen or inside of complex patterns such as a data tables or lists.
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| Size Variant | Large | Small | Default | Large |
| Type Variant | Circular | Linear | Circular |
Small
<CircularProgress size="small" />
Large
<CircularProgress size="large" />
Indeterminate
<LinearProgress variant="indeterminate" show={true} />
Determinate
<LinearProgress variant="determinate" show={true} value="50" />
Help and support