Progress Bar

Provides feedback about the duration of a process or journey.


Progress bars shows users a way to estimate how long they have to wait for a process to complete. They are usually transient and disappear when a process is complete. There are two types of progress bars based on the type of duration: a. Determinate, for a process with defined duration, such as a file conversion. b. Indeterminate, for unquantifiable tasks, such as loading.

When to use

  • For a long process or journey that can take a considerable or unknown amount of time
  • To visually show the process overview and constant feedback about where the user is in the journey or how much time it can take for the journey to be complete.


Anatomy of progress bar
  1. Label: The process or journey the progress bar refers to.
  2. Progress bar: Consists of the background field (refers to the total length of the process) and the indicator (refers to how much the process or journey is complete.)
  3. Caption: Optionally adds helper text for additional information to be shown, such as file size in case of a file upload.

Best Practices

  1. When possible, show percentage and amount of progress completed. This helps users estimate how long the task will take to complete.
  2. If it’s helpful, display a description that provides additional context for the task.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.