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

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 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:

1. 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.
2. Start/end indicator: Indicates the start and end points of the progression.
3. Track: Track representing the entire progression from start to finish.
4. Progress bar: Bar representing the current progress, based on the percentage value.
5. Icon (semantic states only): Additional indicator showing the value state as an icon.

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 can be used with value state to indicate the semantic meaning.

Progress Indicator value states (from top to bottom: None, Error, Warning, Success, Information)

Related Links