Progress
Visual representations of the status of a system process.
Progress components are non-interactive elements that visually indicate the progress of a task or function.
Also known as: Progress indicator, progress bar, loading indicator, progress ring, spinner, loader, progress loader, activity indicator, ProgressView(iOS), ProgressBar(Android).
Anatomy
A. Progress indicator (required): Animated fill indicating the function is in progress.
B. Label (optional): Label indicating what’s in progress, such as a file name.
C. Status (optional): Label indicating how much process has been completed for determinate indicators.
Usage
| Component | When to use |
|---|---|
| Linear progress | When space is limited. |
| Circular progress | When the design has sufficient space. |
| Progress gauge | For a more detailed progress indicator, such as in dashboards or control panels. Note: Progress gauges are only available as determinate indicators. Learn more below. |
Best practices
- Avoid using progress components for very lengthy load times, as users may perceive that the app is slow or frozen.
- Only use determinate progress indicators if the exact amount of completion is known. Learn more below.
Do
Use inline messages as needed to help indicate what’s in progress
Do Display the progress component as soon as the operation starts if the task takes more than two seconds to complete.
Don't Make indeterminate processes take longer than 5 seconds. Please reference performance requirements.
Do Display content as it loads or load it in the background as much as possible so that it won't impact users.
Don't Apply the progress component to individual content loading.
Determinate progress
Determinate progress indicators display how long a process will take. They include an exact percentage or fraction indicating how much progress has been made.
- Only use determinate indicators when the amount of completion is known, as estimating can be misleading or cause frustration.
Indeterminate progress
Indeterminate progress indicators display unknown wait times. Indeterminate progress indicators may turn into determinate progress when more information is available.
- Use indeterminate indicators when the amount of progress is unknown or not important.
Placement
In general, progress indicators should be placed near the function they represent. o show that an entire page or app is loading, place a linear indicator at the top of the page or just below the navigation bar.
- Consider using skeleton loading to further indicate that loading is in progress.
Content
- Use plain language without abbreviations or jargon.
- Annotate the percentage completed in determinate progress components.
