Also known as:
ProgressProgress barProgress indicatorProgress trackerLoading barLoader

Progress Bar

Progress bars show continuous progress through a process, such as a percentage value. They show how much progress is complete and how much remains.

AnchorNeed to know

  • Give people feedback about progress.
  • A static progress bar shows current progress through a process that will not progress without user interaction.
  • A loading progress bar shows current progress through a loading process that the system will progress by itself without user interaction. We use animation to show that the system is operating.

Visuals

UI Kit

Examples

Options

  • Static process or loading progress:
    • Static: a static progress bar shows current progress through a process that will not progress without user interaction.
    • Loading: a loading progress bar shows current progress through a loading process that the system will progress by itself without user interaction. We use animation to show that the system is operating.
  • Props:
    • Min
    • Max
    • Initial value
    • Infinite/indeterminate
  • Moods: positive, informative, cautionary, negative

To keep in mind

Give people feedback with progress bars.

  • Anatomy:
    • Progress track: This track shows the path the progress bar will take.
    • Progress bar fill: This shows the completed progress visually as a colored bar.
    • Progress value: This shows the completed progress as text, usually a percentage. Sometimes a fraction or ratio may be shown.
    • Progress label: This describes the process that's in action.
  • Use loading progress bars for system processes, such as downloading, uploading, or processing.
  • Start progress bars on 1% instead of 0% to show the process has started, where it makes sense.
  • A progress bar is not interactive.
  • Avoid using indeterminate progress bars. Try to estimate how long a process will take or how many items it will process. A progress bar may start with an unknown amount of progress, then become determinate.
  • In right-to-left (RTL) languages, start the progress bar fill from the right and fill towards the left as progress increases.
  • Accessibility:
    • Use the progressbar role to show that the element displays progress status.
    • Use the aria-valuenow, aria-valuemin, and aria-valuemax attributes to indicate progress completion.

When to use and when not to use

When to use
  • Use a progress bar when it will give people feedback in a long-running process with continuous values.
When not to use
  • For an unknown amount of time/progress, consider using a loading spinner instead.
  • For loading content in a module, consider using a loading skeleton instead.
  • For discrete steps, consider using a progress stepper instead.
  • For an interactive element that lets people provide input to show progress, use a range slider.

See also

External links

Here are some examples of other existing design systems: