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.

Types

Linear Indicator

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

A. Indicator

B. Track

Circular Indicator

Circular indicators can be used within a button or card component. 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)



Circular Indicator Within a Button

A circular indicator can be used within a button to show that the action for which the button initiates is in progress. They should be used for short inter-determinate activities (2 to 5 seconds). If it is longer than that, use a snackbar or a push notification as an alternative.

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
Determinate circular progress indicator

Specs

Determinate Linear Progress Indicator

Indeterminate & Determinate Circular Indicator



Sample Element Alpha Hex
Indicator #0A6ED1
Track #800A6ED1 or #0A6ED1 with 50% opacity
Button background #0A6ED1
Button indicator progress #FFFFFF
Button text #FFFFFF
Loading text #6A6D70