Progress bar

The progress bar is a visual element that provides information about the status of a submission or collecting process. For example, progress bars can be used to display how much time is left for a task to be completed or how much data is left to process, to inform the user how long they will have to wait.

Component checklist


Up to date


Up to date


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.



Usage - 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.



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.

Usage - States
  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.




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.

Modifiers - Divided

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.

Modifiers - Divided - States



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


  • 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”.