Progress and activity Redirect 2

Progress and activity indicators are used to provide visual feedback that a process is active. See the Coding guide for details on how to implement these indicators in your apps.

Note: The stylesheet and image resources for standard progress and activity indicators are currently not finalized.

Characteristics

May include an animated visual element, a text label, or both.

Progress and activity indicators may be used in modal windows, or inline either with content or adjacent to content.

An activity indicator is used to show that an activity is ongoing without indicating how long the task is expected to take; these can be "barberpole" style indicators, or spinners.

A progress indicator is used to show how much out of 100% of an activity has been completed.

Visuals

There are three kinds of progress and activity indicators: activity bars, progress bars, and spinners.

Activity bar

Activity bars are used when an unknown amount of data is being received, or when the duration of the activity being performed cannot be predicted.

Progress bar

Progress bars are used when a known amount of data is being received, or when the duration of the task being performed can be predicted.

When the activity for which a progress bar is being presented is paused, the "uncompleted" part of the bar goes from solid to a "barberpole" striped pattern, so that the user has feedback as to the paused nature of the activity.

Spinner

Used when data is being sent.

Modal versus non-modal usage

You should use a modal progress or activity indicator when the phone can't be used for any other tasks while the activity continues. A non-modal progress indicator animates while the activity is progressing, without preventing the user from performing other tasks.

Modal progress and activity indicators

Modal progress indicators are displayed on a full-screen view, such as the ones shown below.

Running progress bar

Paused progress bar

Activity bar

Spinner

Non-modal progress and activity indicators

Non-modal activity and progress bars are displayed immediately below the view's header, if there is one. If there's no header, the bar is instead displayed immediately below the system's status bar (with the time, battery level, and so forth). You can also use an inline spinner to indicate progress of a task specific to an item in a list.

Running progress bar

Paused progress bar

Light activity bar

Dark activity bar

A darker version of the activity bar is used when the screen background is predominantly a dark color, such as in this photo gallery screenshot.

Inline spinner

Here, an inline spinner next to a text message indicates that the message is in the process of being sent.