The progress component helps communicate that a background action or task is currently in progress. It includes both linear and circular variations, each provided as separate components for flexibility in different layouts and use cases.
You can configure either progress component to display as determinate or indeterminate based on the context.
- Determinate progress is used when you know how much of a task has been completed and how much remains. It shows measurable progress, like a bar that fills up, so users can understand where they are in the process and how long it might take. It should be used for progress that can be measured.
- Indeterminate progress is used when the system can’t accurately predict how long a task will take or how far along it is. It displays continuous motion (like a looping bar or spinning indicator) to signal that something is happening, even though the exact duration is unknown. It should be used for progress that cannot be measured.
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 | small | large | default | large |
| type Variant | circular | linear | circular |
Help and support