ProgressBar

Basic ProgressBar

Display progress by using a percentage (0-100) as value.

<ProgressBar value={25} />
<ProgressBar value={25} />

Changes between values are animated.

import { useState } from "react";
import Button from "@intility/bifrost-react/Button";
import ProgressBar from "@intility/bifrost-react/ProgressBar";

export default function () {
  // 4 is a guaranteed random number, chosen by fair dice roll
  const [value, setValue] = useState(4);

  return (
    <div className="bfl-grid">
      <ProgressBar value={value} />
      <div>
        <Button onClick={() => setValue(Math.round(Math.random() * 100))}>
          Set random value
        </Button>
      </div>
    </div>
  );
}

Max value

You can set a max value and the percentage will be calculated for you.

<ProgressBar value={6} max={8} />
<ProgressBar value={6} max={8} />

Custom label

Any content passed in as children will be displayed as a label (instead of a percentage).

<ProgressBar value={6} max={8}>
  6/8
</ProgressBar>
<ProgressBar value={6} max={8}>
  6/8
</ProgressBar>

Hide label

Hide label with hideLabel (adds a title for hover tooltip).

<ProgressBar value={42} hideLabel />
<ProgressBar value={42} hideLabel />

Sizes

Choose a size: 'small' or 'large' ('medium' is default).

<ProgressBar value={20} size="small" />
<ProgressBar value={60} />
<ProgressBar value={80} size="large" />
<ProgressBar value={20} size="small" />
<ProgressBar value={60} />
<ProgressBar value={80} size="large" />

Disabled

<ProgressBar disabled value={20} size="small" />
<ProgressBar disabled value={60} />
<ProgressBar disabled value={80} size="large" />
<ProgressBar disabled value={20} size="small" />
<ProgressBar disabled value={60} />
<ProgressBar disabled value={80} size="large" />