Last Update: March 03, 2023
Platform: Web
Designer: Kathrin Fischer
Intro
The progress indicator visualizes the current advancement of a process or a degree of accomplishment. The inside of the progress indicator is filled with color to indicate the state of progress. The advancement depends on the specific process. The progress is shown either using absolute numbers or the current percentage of completion together with a progress bar.
Usage
Use the progress indicator if:
- You need to visually show a current status.
- You need to visually strengthen a current status.
- You need to make different states comparable to each other at a higher level.
- You want to show custom values as well as percentages.
Do not use the progress indicator if:
- Visual feedback is needed for an ongoing operation. Use a busy indicator instead.
- The progress is indeterminate. Use a busy indicator instead.
- You want to display a single value in the form of a fillable shape or a group of shapes that describe their context. Use the status indicator instead.
Types
Enabled/ Disabled
The progress indicator can be enabled or disabled.
Display State
For usage in read-only forms or read-only tables, the progress indicator provides a “display” state. This state is optimized for reading environments.
The default height is lower, the bar color darker
Value States
The progress indicator can visualize different value states that are represented by various theme-dependent semantic colors. The states are: normal, success, warning, error, and information
Structure & Components
Behavior & Interaction
The progress indicator can be used to describe a process, but also as the status of a value.
Responsiveness & Adaptiveness
The progress indicator itself is not responsive. There is no visual difference between the cozy and compact form factors. The compact form factor is used for apps that run on a device operated by a mouse and keyboard.
Application-specific examples
Progress Indicator on the Team Portfolio in GP
Accessibility
Resources
Link to the Fiori GL: https://experience.sap.com/internal/fiori-design-web/progress-indicator/
Link to Visual Core Wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698914967
Link to SF UX template: https://www.figma.com/file/H1L1hOMLkbZwpuCS1kiWaQ/Progress-Indicator?type=design&node-id=409-94&mode=design&t=TmU6aXLcs9YfOch2-0
UI5 Demo Kit: https://sapui5nightly.int.sap.eu2.hana.ondemand.com/#/entity/sap.m.ProgressIndicator/sample/sap.m.sample.ProgressIndicator
Progress Indicator With Announcement: https://sapui5nightly.int.sap.eu2.hana.ondemand.com/#/entity/sap.m.ProgressIndicator/sample/sap.m.sample.ProgressIndicatorWithAnnouncement