Draft
This page is not complete.
Progress and activity indicators are used to provide visual feedback that a process is active.
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. |
