Progress and activity indicators are visual indications of an app loading content.

A single visual indicator should be used to represent each type of operation. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

Additional button types include:

Determinate indicators display how long an operation will take.

Indeterminate indicators visualize an unspecified wait time.

Types

Linear
Circular

Behavior

Loading content in phases
Loading additional content

Types of indicators

When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.

When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Both linear and circular progress indicators may be either determinate or indeterminate.

Linear

A linear progress indicator should always fill from 0% to 100% and never decrease in value. It should be represented by bars on the edge of a header or sheet that appear and disappear.

For multiple operations happening in sequence, use the indicator to represent the progress as a whole, and not each individual operation.

Determinate

Indeterminate

Linear progress indicators Light Theme

Demo usage

Getting your files

Loading content for the first time

Query indicator on a webpage

Circular

Determinate

Indeterminate

Circular progress indicators Light Theme

Determinate

Indeterminate

Circular progress indicators Dark Theme

Demo usage

cloud_upload

A circular loader may be integrated with a button.

A circular loader may be used to load something on hover.