Loading-progress

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.

Component st

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

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 Progress Bar instead.

Structure

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

Properties

Size

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.

Scaling

Progress bar width can be customized, taking into account the container's padding in which it's placed. The default width is 552 px.