Progress bar

Component checklist

Overview

A progress bar indicates that the user’s request has been received and the application is progressing toward completing the requested action.

The progress bar also informs users about the status of ongoing processes, the estimated time of how long a process will take, or if a request is being executed.

 

Anatomy

1. Title
   The text describes the process that the progress bar refers to. The title can be visually hidden but must be defined to be accessible.
2. Count info
   Typically, the count info presents progress as a percentage, fraction, ratio, or numerical value for a determinate situation.
3. Helper text (optional)
   The helper text provides extra details regarding the procedure.
4. Track
   The static area that the bar indicator moves on top of and acts as a fixed visual reference of the total length and duration of the process.
5. Bar indicator
   Indicates how much the process has been done.
6. Error message (optional)
   The message helps streamline the process and keep data clean when the user fills out forms.

 

States

There are three states for the progress bar: active, success, and error. After the process is completed successfully or unsuccessfully, a progress bar can either remain persistent as confirmation or validation or automatically be dismissed depending on the most suitable use case.

1. Default
   The default state, represented by an animated bar indicator, indicates that the action is still in progress.
2. Data processing
   The data processing state, represented by a bar indicator, indicates that the action is still in progress.
3. Success
   The success state, represented by a full-width green progress bar, indicates that the action was completed successfully.
4. Error
   The error state indicates that the action was not completed. If an error occurs, an inline notification or error handling should appear within the frame. When a process fails, the indicator bar’s progress spans full width, turns red, and remains visible.
5. Overload
   In specific cases, the progress bar can be visualized with an overload bar indicator to show that the data is over the limit.
6. Overloaded
   If data can overload the progress bar's maximum and the amount of data is 200% and more, use the overloaded state. Data visualization is not reflected from this point.

 

Modifier

Divided

In specific cases, the progress bar can be visualized with a predicted bar indicator to show the amount of data added after some action typically triggered by the user.

If needed, a divided progress bar can also be combined with an overload modifier. In this case, the color should be changed primarily on the second part of the bar.

 

Content

The progress bar has a title and an optional helper text.

Title

• The title informs users what information the progress bar is processing.
• Keep the title short and concise by limiting it to a few words or a single line of text.
• The title text should never change as the progress bar is loading. It also does not need to be updated when the process ends since the bar indicator color and helper text provide the success or error information.

Count info

• Helper text is used to show additional information about the process taking place.
• Common use cases of helper text for a progress bar can either be a generic phrase, for example, “Collecting data…”, or it can indicate an exact amount of something to be completed, for example, “45/200” or “12 of 128 profiles”.