Components

ProgressBar

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The label and the percentage sit above the bar. The percentage follows the Provider language: “40%” in English.

Uploading file

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

export default function Default() {
  return <ProgressBar label="Uploading file" value={40} />;
}

Indeterminate

Without value the bar sweeps. With reduced motion the sweep stops and a still, faded bar remains.

Preparing

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

export default function Indeterminate() {
  return <ProgressBar label="Preparing" />;
}

With a description

valueText gives the spoken value instead of the percentage; description adds a line such as the time left.

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" />;
}

Sizes and tones

size="sm" is 4 px, md 8 px. Use success, warning or danger once the outcome is known.

Uploading file

Upload complete

Upload stopped

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

export default function SizesAndTones() {
  return (
    <div className="flex flex-col gap-lg">
      <ProgressBar label="Uploading file" value={40} size="sm" />
      <ProgressBar label="Upload complete" value={100} tone="success" />
      <ProgressBar label="Upload stopped" value={65} tone="danger" />
    </div>
  );
}

Live

The fill grows by scale rather than width, so it never triggers layout.

Uploading file

import { Button, ProgressBar } from '@bigbang/ui';
import { useEffect, useState } from 'react';

export default function Live() {
  const [value, setValue] = useState(0);
  const [running, setRunning] = useState(false);
  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setValue((current) => Math.min(current + 10, 100)), 500);
    return () => clearInterval(id);
  }, [running]);
  return (
    <div className="flex flex-col gap-md">
      <ProgressBar label="Uploading file" value={value} tone={value === 100 ? 'success' : 'brand'} />
      <div className="flex gap-sm">
        <Button size="sm" onClick={() => setRunning(true)}>
          Start
        </Button>
        <Button
          size="sm"
          variant="secondary"
          onClick={() => {
            setRunning(false);
            setValue(0);
          }}
        >
          Reset
        </Button>
      </div>
    </div>
  );
}

Light and dark mode

The track uses color-surface-sunken and the fill color-action-primary-default.

Uploading file

Upload complete

Upload stopped

Uploading file

Upload complete

Upload stopped

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

export default function SizesAndTones() {
  return (
    <div className="flex flex-col gap-lg">
      <ProgressBar label="Uploading file" value={40} size="sm" />
      <ProgressBar label="Upload complete" value={100} tone="success" />
      <ProgressBar label="Upload stopped" value={65} tone="danger" />
    </div>
  );
}