Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)
Components Progress and Activity
This document is a preview.

Google ©

Privacy & Terms

Progress and Activity

Make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content. Each operation should only be represented by one activity indicator—for example, one refresh operation should not display both a refresh bar and an activity circle.

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

For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.

For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.

There are two types of indicators: linear and circular . You can use either one for determinate and indeterminate operations.

Linear

A linear progress indicator should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations are happening in sequence, use the progress indicator to represent the delay as a whole, so that when the bar reaches 100%, it doesn't return back to 0%.

Linear bars should appear and disappear on the edge of a header or sheet.

Circular

Circular with integration

A circular loader may be integrated with a fab or a refresh icon.

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

Loading in phases
Ink (copy and images) loads within an existing, unchanging container.
The paper container is generated, then the ink (copy and images) load within it.

Loading additional content

An indeterminate linear indicator is recommended for a card expansion on larger surfaces such as desktop.
An indeterminate circular indicator with an ink explosion initiation is recommended when refreshing a list from below.
An indeterminate circular indicator with an ink explosion initiation is recommended when refreshing a list from above.