Progress and Activity Indicators

Indicators visually show that a task is ongoing. If you can determine the amount of time a user waits for a task to complete, we recommend using a progress indicator. If the wait is for an unspecified amount of time, use an activity indicator.

Usage

Use indicators to show the progress of tasks such as data loading.

Behavior

Filling

A progress indicator gradually fills according to the level of progress made.
Spinning

An activity indicator spins until an activity is completed.

Types

Progress indicators

A progress indicator helps users determine how long they will wait by displaying how far a task has progressed. You can show progress with a percentage scale or a fraction indicator. The indicator disappears when the task is completed.

Progress Indicator in developer's guides
Native	Progress Bar
Web	Progress Bar

Full progress indicator

Display a full progress indicator around the edge of the screen.
Small progress indicator

Display a small progress indicator in the middle of the screen. Provide a description of the progress status below the indicator.
In-list progress indicator

The progress of an action for a list item can be displayed with an in-list indicator.
Activity indicators

Activity indicators inform users that a task is ongoing without specifying progress satus. The indicator disappears when the task is completed.

Progress Indicator in developer's guides
Native	Progress Bar > process
Web	Progressing

Full activity indicator

Display a full activity indicator around the edge of the screen to indicate that an action is ongoing. The indicator keeps spinning around the edge until the action is completed.
Small activity indicator

Display a small activity indicator in the center of the screen to indicate that an action is ongoing. A small circle keeps spinning until the action is completed. A description of the action can be shown below the indicator.
In list activity indicator

Ongoing actions on a list item can be highlighted with an in-list indicator.