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.
Linear
Circular
Loading content in phases
Loading additional content
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.
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 <strong>multiple operations</strong> 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 indeterminate and determinate progress indicators
A circular loader may be integrated with a floating action button.
Animation of a circular loader with integration
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.