Progress Indicators

Intro

Progress indicators display an undefined wait time or illustrate the length of a certain process to a user.

Usage

Progress indicators help users estimate the status of ongoing processes, like waiting for an app to load, submitting a form, or saving updates.

Variations

Linear Indicator

Linear progress indicators support both determinate and indeterminate operations.

A. Indeterminate indicators should be used when a process completion cannot be determined.

B. Determinate indicators display how long a process will take. They should be used when a process completion can be determined.

Indeterminate (A) and determinate (B) linear progress indicators

A. Indicator

B. Track

Anatomy of linear progress indicators

Circular Indicator

Circular indicators can be used within a component to communicate that a process is loading. This is most commonly used as a progress indicator to let the user know the current screen is being refreshed.

A. Indeterminate (use when process completion cannot be determined)

B. Determinate (use when process completion can be determined)

Indeterminate (A) and determinate (B) circular indicators

Circular Indicator Loading

Circular progress indicators are positioned in the center of the screen. It represents the initial loading of the screen’s content.

Determinate circular progress indicator

Specifications

Determinate Linear Progress Indicator

Width and height of linear indicators

Indeterminate & Determinate Circular Indicator

Width and height of circular indicators

Resources

Development: Fiori Indicator

Material Design: Progress Indicator