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.

Specs