Progress bar

Progress bars are used to visually and quantitatively represent the progression of a system operation, such as a download or upload, indicating how long the system will take to complete the process.

Design

Web component

Is documented

Status

Healthy

Figma component

Storybook

Principles

Use when

  1. to visually represent the loading process of a section or data where user interaction with other parts of the interface cannot be prevented.
  2. When the system needs time to fetch the next action from input fields, buttons, dropdowns.
  3. Use when the system is unable to determine with certainty what layout and components are used once the screen loads. If the system can determine layout / components, use the skeleton component instead.

Don’t use when

  1. if the system can determine layout and components to indicate full page layout of the content or a dynamic datas of the content being loaded, use skeleton instead.
  2. to indicate how long the system will complete the process in a predictable or unknown amount of time, use spinner instead.

Structure

loading-progress-structure
  1. Progress label (optional)
  2. Progress value label (optional)
  3. Indicator (foreground&background)

Properties

Size

Storybook failed to load. Please connect to the VPN to access.

Large

Large is for modal or large-scale cards on the layout.

Default

Default is for cards on a layout or on the pages.

Small

Small is for the table or widgets.

Behavior

Progress label

A label is used to explain that the current action of the bar is ongoing. Use it when it’s necessary to explain the situation.

Storybook failed to load. Please connect to the VPN to access.

Value Label

Value label is for displaying progression value as a percentage or in steps.

Storybook failed to load. Please connect to the VPN to access.

Using the progress bar only

It’s possible to use the bar only, but please be cautious to place body text or another supportive component that can be related to the progress bar.

Scaling

Progress bar width can be customized, mostly can fill the parent’s container.

Design source