ProgressBar

Basic ProgressBar

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

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

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>

Hide label

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

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

Colors

Theme

By default, the progress bar will follow the current color theme (and mode).

To theme a single ProgressBar, you can apply the theme class directly.

<ProgressBar value={50} />
<div className="bf-theme-pink">
  <ProgressBar value={50} />
</div>
<ProgressBar value={50} className="bf-theme-purple" />

State

New in 6.6

Alternatively, use the state prop to explicitly set a color:

<ProgressBar state="success" value={57} />
<ProgressBar state="warning" value={82} />
<ProgressBar state="alert" value={98} />

Loading

New in 6.9

loading prop adds animated barbershop-style stripes to indicate that progress is ongoing.

<ProgressBar loading value={20} size="small" />
<ProgressBar loading value={60} className="bf-theme-pink" />
<ProgressBar loading value={80} size="large" state="warning" />

Disabled

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