Intro

The progress indicator shows how far a process has progressed or been completed. A horizontal bar filled with color represents the level of completion, and the value is displayed on top of the bar as either an absolute number or a percentage.

In SAP Fiori, the progress indicator acts as a visual "meter" or micro chart. It shows the current status of an object and is not used for real-time or ongoing operations.

Progress indicator

When to Use

false

Use the progress indicator if:

You need to display the current status of an object visually.
You want to emphasize a status using a visual cue.
You need to compare multiple values at a high level.
You want to show custom values as well as percentages.

dont

false

Do not use the progress indicator if:

You need to provide visual feedback for a running or ongoing process - use a busy indicator instead.
The progress is unknown or cannot be measured - use a busy indicator instead.
You want to show a single value using a fillable shape or icon-based layout - use the status 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

Types

Text Display Variants

The progress indicator can be displayed with or without text. By default, it shows a percentage or custom value above the bar. You can also choose to hide the text if it’s not needed.

Progress indicators shown with and without text displayed above the bar

Value States

The progress indicator can reflect different value states using colors and icons to convey meaning and indicate the current status. The colors and styles automatically adapt to the active visual theme.

The states are:

A. None: Default appearance without additional meaning.
B. Information: Neutral context or informational status.
C. Positive: Indicates success or a desirable value.
D. Critical: Signals a warning or concern.
E. Negative: Indicates an error or failure.

For more information on how to use the different semantic states of the control, see How to Use Semantic Colors.

Value states can be combined with the “enabled” and “display” states.

Different value states applied to progress indicators using color and icons

Guidelines

Use the progress indicator to highlight a key status that users need to notice at a glance - such as warnings, validations, or goal completion.

Progress indicator showing password strength with a warning that the password may be too short

Label

Always provide a label for the progress indicator.

Exception: If the progress indicator is used as a single control inside a cell of a responsive table, the column header text is used as a label.

Progress indicator in a responsive table

Text Truncation

If the text inside the progress indicator is too long to fit, it is automatically truncated. In this case, clicking the progress indicator displays an information popover that displays the full text.

The information popover is available only when the text is truncated, and it opens when the user clicks the progress indicator.

Progress indicator with information popover below showing entire text

information

For more information, see Truncation.

Group

Use a group of up to five bars to help users compare different states at a high level. Note that in a group of more than five bars, slight differences are much harder to perceive than a numeric display.

If the user has to compare a group of values, be sure to use the same visual display for all of them (only bars or only numbers).

Group of progress indicators

Animation

Although the progress indicator supports an animation mode, do not use it. The animation is slow and does not provide additional value.

Additional Guidelines:

Progress indicators are typically used within (but not restricted to) the following controls:

Do not disable a progress indicator. A progress indicator is not interactive, therefore disabling it has no effect.

Exception: The progress indicator is shown inside a disabled UI area, such as a completely disabled form or panel.

Properties

The following additional properties are available for the progress indicator:

The width property defines the width of the progress indicator. The height property defines the height of the progress indicator. Adapt it only if the default height does not fit into the surrounding context. Do not use a height below 1.5 rems if text is shown inside the progress indicator.
The textDirection property is used for localiaztion (right-to-left languages).
The busy property sets the progress indicator to busy state.
The visible property shows or hides the progress indicator.
The tooltip property does not have an effect.

Localization

The progress indicator supports both left-to-right and right-to-left display directions. In left-to-right (LTR) languages, the bar fills from left to right. In right-to-left (RTL) languages, the bar fills from right to left. The value text displayed above the bar is also aligned according to the text direction.