Overview
Progress Bar
Provides feedback about the duration of a process or journey.
Overview
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
- Label: The process or journey the progress bar refers to.
- 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.)
- Caption: Optionally adds helper text for additional information to be shown, such as file size in case of a file upload.
Best Practices
- When possible, show percentage and amount of progress completed. This helps users estimate how long the task will take to complete.
- 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.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more