Intro
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
Do
Use the progress indicator:
- To show an ongoing process and provide an estimate of how long it will still take.
- To show the current status visually.
- To emphasize the current status visually.
- To help users compare different states easily on the fly.
- To show custom values or percentages.
Don't
Don’t use the progress indicator:
- If visual feedback is needed for an ongoing operation. Use a busy indicator instead.
- If the progress is indeterminate. Use a busy indicator instead.
Anatomy
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
Semantic States
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 lets you use a value state to convey semantic meaning.
You must describe the value state, which you can do with a label, text, or surrounding content.
Progress Indicator value states (from top to bottom: None, Error, Warning, Success, Information)
Related Links
Components
Implementation
- Progress Indicator
(UI5 Web Components documentation)
Specifications
- Progress Indicator (visual design)
- Progress Indicator (interaction design)
Components
Implementation
- Progress Indicator
(UI5 Web Components documentation)