The progress indicator visualizes the current advancement of a process or a degree of accomplishment.
Progress indicator (progress at 0%, 60%, and 100%)
When to Use
The progress indicator component consists of the following parts:
- Text: Describes the current status. If no specific text is provided, the percentage value is displayed by default. You can also opt to hide the text.
- Start/end indicator: Indicates the start and end points of the progression.
- Track: Track representing the entire progression from start to finish.
- Progress bar: Bar representing the current progress, based on the percentage value.
- Icon (semantic states only): Additional indicator showing the value state as an icon.
Anatomy of the progress indicator
Use the progress indicator to add clarity and weight to an important state that needs to be perceived very quickly.
Progress indicator used to display a status
The progress indicator can be used with value state to indicate the semantic meaning.