Progress Bar Design Component from Shipfaster UI Design Systems

Shipfaster: UI Components

Progress Bar

Overview

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

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.