Progress
Progress indicators express an unspecified wait time or display the length of a process.
They let users know about the status of ongoing processes, such as loading an app, submitting a form, or saving their progress. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
Principles
Informative: Their look and animation reflect the status of a process. They are never simply decorative.
Animated: Progress indicators use animation to capture attention and inform users of an activity’s progress.
Consistent: They should be applied to all instances of a process (such as loading) in a consistent format (linear or circular).
Use cases
You should use progress indicators in the following situations:
- When fetching data from a server or database. For example, when loading a list of items or user profiles, a progress indicator can signal to users that the app is working.
- When users submit a form (like a login or payment form), display a progress indicator to show that the submission is being processed. This helps manage user expectations about waiting times.
- When a user uploads files, a progress bar can visually represent the upload status. This helps users understand how much of the process is completed and how much remains.
- When refreshing content, such as pulling to refresh a list, a progress indicator can show that new data is being fetched, enhancing the overall user experience.
There are 2 types of progress indicators, which are: determinate and indeterminate.
Determinate indicators display how long a process will take.
Indeterminate indicators express an unspecified amount of wait time.
1. Linear indicator
2. Circular indicator
They should be used when progress isn’t detectable, or if it’s not necessary to indicate how long an activity will take.
Design guidelines
Anatomy
Indicator
Animates along the length of the track. Operations display the indicator increasing in sync with the process’s progress (determinate) or continually growing and shrinking along the track until the process is complete (indeterminate).
For linear indicators, operations display the indicator increasing in width from 0 to 100% of the track.
1. Determinate
2. Indeterminate
For circular indicators, operations display the indicator increasing from 0 to 360 degrees of the track.
1. Determinate
2. Indeterminate
Track
It's a fixed width rule, with set boundaries for the indicator to travel along.
Placement
Linear indicators
The placement of a linear progress indicator can indicate the scope of a process.
A linear indicator at the center of the screen can indicate loading all screen content.
A linear indicator attached to a container, such as a card, can indicate the process applies to that particular item (and that interaction with the rest of the UI is possible).
Circular indicators
Circular progress indicators are positioned to indicate the process that they represent:
When centered on the screen, they indicate the initial loading of screen content.
A circular indicator can be integrated into a button or actionable icon to express a connection between an interaction and a specific item.
Don’t apply progress indicators to every button in your app. They can unnecessarily interrupt the user’s task.
Specs