Components – Progress & activity

Progress & activity

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.

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