Components

ProgressBar

A bar that shows how far a task has come, or sweeps while the remaining time is unknown.

Storybook: Storybook
Source: Source

When to use

ProgressBar shows the progress of a task that takes more than a few seconds: a file upload, an import, a multi-step operation.

When not to use

For waits under a second: Show nothing.
For a button or a small area loading: Spinner or the button’s loading state.
While content loads: Use Skeleton.
To show steps in a form: Use a step indicator.

Anatomy

Transferring files

About 2 minutes left

import { ProgressBar } from '@bigbang/ui';

export default function WithDescription() {
  return <ProgressBar label="Transferring files" value={3} max={10} valueText="3 of 10 files" description="About 2 minutes left" />;
}

Label.
Value: Percentage.
Track.
Fill.
Description: Optional.

Behaviour

The fill grows smoothly when the value changes.
Without value the bar sweeps; it turns determinate once the value is known.
In right-to-left text the fill starts on the right.

Guidelines

Name the label after the task in progress.
Use a determinate bar when progress can be measured.
On completion, switch to the success tone or replace the bar with the result.

Content

Turkish	English
Dosya yükleniyor	Uploading file
Yaklaşık 2 dakika kaldı	About 2 minutes left

Spinner: Small, indeterminate loading.
Skeleton: A placeholder for loading content.
Toast: To report the result when it finishes.