Activity & Progress
The Activty and Progress pattern handles visual indicators for application loading. Page status indicators have two functions: to give the appearance that a full page reload is taking place in reaction to a user's action, or to convey necessary feedback to the user when the page load is less than instantaneous.
The pattern includes the following required elements:
- Animated UI element: typically a progressing linear bar or radial spinner element. Can also include animated dummy content structure until content loads in.
- Determinate progress: When either the duration or phase of the update is known, such as in a download, install, or configuration process, actual metrics are imparted to the user to indicate either the amount completed, the amount remaining, or both.
- Or Indeterminate progress: This appears when the duration of the update is unknown, due to uncontrollable factors (such as broadband capacity, server demand, or file size).
The pattern includes the following optional elements:
- Messaging: used in conjunction with animated element for further context.
- Page Dimming: can provide focus on animated element for higher visibility.
Appearance
Appearance characteristics for this pattern.
- Spinner: Animated spinner is typically centered vertically/horizontally within the screen to indicate progress or activity. Size and color are variable.
- Linear: A thin, linear bar (typically near the top of the page) animates across. Size and color are variable.
- Novelty: Animated logos or an animated visual metaphor can be used to indicate progress or activity.
Behavior
Common behaviors for this pattern.
- Determinate progress: Used when page activity (reload/refresh) is known. Real-time progress is displayed in an animated element in. An indicator should fill from 0% - 100% and not decrease in value.
- Indeterminate progress: Used when page activity (reload/refresh) is not known.
- Non-interactive: The page and/or contents of the page are not interactive while the page reloads/refreshes.
- User-input: User interaction, such as pull-down-to-refresh or searching, typically initiates a reload/refresh.
- Progressive content loading: A basic structure of a page can load in without content and pulse/animate to suggest content is forthcoming.
Usage
Usage guidelines for this pattern.
- Page refresh or reload should never happen without an initial action from the user.
- Use to reassure the user that a task or process hasn't stalled.
- Non-linear animated elements typically appear vertically and horizontally centered within a screen.
Related