Progress Bar

Progress indicators offer visibility of system status to the user, giving feedback to indicate that the application is taking some time to processing data. The main aim of these components is to reduce the user's uncertainty about offering something to look at while the user is waiting for the end. A progress bar should be used in any scenario that will take more than 1 second in performing the action, for anything that takes less than that time, it will be distracting for the user.

Usage

Do's

  • Use a progress bar when it needs to give feedback in a long-running process with continuous values.
  • Add additional information to clarify the user about the action it is waiting ("Sending documents...").
  • Use the determinate type whenever possible, the user can have an estimation on how long it is going take.

Don'ts

  • For an unknown amount of time/progress, consider using a loading spinner instead.
  • Do not use this type of component in actions that will take less than 1 minute of processing.

Variants

The component progress-bar has two variants: default and overlay.

Progress bar variants
Progress bar variants

Determinate or indeterminate

  • Determinate indicators display how long a process will take. They should be used in longer processes.
  • Indeterminate indicators express an unspecified amount of wait time. They should be used when:
    • The processing time is unknown.
    • The wait time is expected to be short enough that it's not necessary to display.