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