What are progress indicators in UI?

A progress indicator is a way of informing the user of the system status and provide immediate feedback.

• It conveys to the user that the system is working on their task and has not crashed. By informing the user about the progress, it allows the user to carry out other activities while the system is working.

• It gives the user something to look at that satisfies them that some progress is being made. A progress bar is preferred over numbers, so the user sees something happening.

Progress indicators should be:

Informative: They should not simply be decorative, but should convey information regarding the status of the process.

Animated: They should use animations to capture the user’s attention and inform them of the task progress.

Consistent: They should be used at all instances in a process wherever required (such as loading, etc.) and be of a consistent format (linear or circular).

Types of progress indicators

There are two categories of progress indicators:

1. Linear and circular: We should use only one type of indicator throughout the app to maintain consistency.

2. Determinate and indeterminate: Determinate indicators show how long it will take for a process to complete. They should be used when we can detect the process completion rate. Indeterminate indicators show an unspecified amount of wait time. They should be used when the process completion rate is not specified.

As more information about a process becomes available, a progress indicator can shift from determinate to indeterminate.

Linear progress indicators

Linear progress indicators have two elements:

• Track: A fixed width line for the indicator to travel along.

• Indicator: An element that animates along the length of the track.

Linear indicators can be of both determinate and indeterminate types.

Linear indicators can be placed in various ways:

• Center of the screen: Loading all page content.

• Attached to a container: Indicate the progress of that particular item.

• Expanding items: Placed along the expanding edge to indicate where the new content will appear.

Circular progress indicators

Circular progress indicators display progress using an animated indicator that moves in a clockwise direction. They can be applied directly on a surface or a card or button. Circular indicators can be both of the determinate and indeterminate types.

Circular indicators can be placed in various ways:

• Center of the screen: Loading all page content.

• Above or below existing content: Indicate where the new content will appear.

Progress indicators should not be used on multiple buttons simultaneously.

Indicators are an important component of the user interface. However, we should use them appropriately and consistently. Longer activities require other methods of communication, such as snackbars.