Components chevron_right Progress & activity

Progress & activity

Minimize visual changes that occur while your app loads content by representing each operation with a single activity indicator. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

Types of indicators Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Linear progress indicators

Buffering progress indicator on a video

 

Query indicator on a webpage

Circular

Circular indeterminate and determinate progress indicators

Circular with integration

A circular loader may be integrated with a floating action button.

Animation of circular loader with integration.

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Loading in phases

One-phased loads

Ink (copy and images) loads within an existing, unchanging container.

Two-phased loads

The paper container is generated, then the ink (copy and images) load within it.

Loading content for the first time.

Load and display all content at once.

Loading additional content

Example 1: Card expansion

An indeterminate linear indicator is recommended for a card expanding on larger surfaces such as desktop.

Example 2: Scroll up to load more

An indeterminate circular indicator with an initial radial ink reaction is recommended when loading a list from below.

Example 3: Swipe down to refresh

An indeterminate circular indicator with a radial ink reaction is recommended when refreshing a list from above.