Shipfaster: UI Components

Progress Bar

Provides feedback about the duration of a process or journey.


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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.

All Products

Shipfaster UI: Figma UI Kit & Design System

Access 8,000+ Customizable components to supercharge your design workflow.

Pricing Icon
3,200+ of Downloads
Review Stars
3,200+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.