Overview

Progress indicators are a family of related components which all provide visual indication of how a process happens.

It is important that the same patterns are used for indicators across our applications so that it is apparent to the user what is happening. Animation and the progress type are used together to indicate to the user what is happening.

Key Points

• Use the correct component to match the process you are trying to indicate
• Be consistent by using the same type of progress indicator for the same kind of activity
• Progress indicators use the theme highlight colour as the indicator
• Positioning and context is important, make sure to be clear what process is taking place

Progress Types

There are two types of progress indicators and each has a specific use case based on the what is being conveyed.

Determinate indicators

These are used when the flow is linear and the process has a known endpoint. With a known endpoint a marker can display the current position of an operation in that process. Progress steps and the progress bar are can be used to display this type of information.

Indeterminate indicators

When the length of a process is unknown or the process is non-linear then this is when this type of indicator should be used. Progress donuts and spinners can be used to display this type of information.

Animation

Motion articulates when a spinner or a progress bar is carrying out a process. If the user has to manually complete a process then the status of the UI element is static until it is completed.

Key Links