Loading Progress Bar

Usage

The Loading Progress Bar is a visual component used to indicate the progress of an ongoing task or process. It provides users with a clear indication of how much of the task has been completed and how much remains. The progress bar is particularly useful in scenarios where the duration of a process is not instantaneous, and users need to be informed about the progress to manage their expectations. Unlike spinners or other loading indicators, the progress bar offers a percentage-based view, making it more informative.

Use it in the following scenarios:

• File Uploads/Downloads: To show how much of the file has been uploaded or downloaded.
• Data Processing: When large datasets are being processed or loaded, the progress bar helps users understand the status.
• Installation Processes: During software installation or updates, the progress bar indicates how much of the process has been completed.

Types

The Loading Progress Bar can be customized to be used in two variations:

• Determinate Progress Bar: Displays a percentage value that accurately reflects the progress of the task.

Anatomy and Behavior

1. Progress indicator - the inner element that visually represents the progress by filling left to right.
2. Track - the path along which the progress indicator loads.
3. Percentage label - A text label that displays the current progress as a percentage. The label updates dynamically as the progress changes

Behavior

• Animation: The progress indicator smoothly fills the container from left to right as progress is made.
• Completion state change: Once the process is complete, the percentage indicator shows 100%, color of Progress indicator changes to brand color: Lila-28 and after delay of 1200ms the whole component disappears.
  

1%

100%

States

The Loading Progress Bar has the following states:

• Initial state: The bar is empty, indicating 0% progress.
• Loading state: The bar is partially filled, reflecting the current progress percentage.
• Completed state: The bar is fully filled, indicating 100% progress.

Gaps and Sizes

Gap between Percentage label and Track: XS Track width: defined by the context (in the project) Track and Progress indicator height: 2XS

Tokens

Colors:

SCSS Variable

Value

$loadingProgressBar-track-color

--bds-brand-primary-color

$loadingProgressBar-progressIndicator

--color-grey-90

$loadingProgressBar-percentageLabel-text-color

--bds-primary-text-color