react bootstrap 5 progress bars example

In this tutorial, we will see progress bars in react with bootstrap 5. We will see progress bars animation component, progress bars label percentage using react bootstrap 5.

Install & Setup Vite + React + Typescript + Bootstrap 5

React Bootstrap 5 Progress bars Example

1. Create simple react bootstrap progress bars using react-bootstrap ProgressBar component.

import { Container } from "react-bootstrap";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function ProgressBarExample() {
  return (
    <Container className="mt-5">
      <ProgressBar now={60} />
    </Container>
  );
}

react bootstrap progress bars

2. react bootstrap 5 progress bars label with percentage.

 { Container } from "react-bootstrap";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function ProgressBarExample() {
  const now = 60;
  return (
    <Container className="mt-5">
      <ProgressBar now={now} label={`${now}%`}  />
    </Container>
  );
}

react bootstrap 5 progress bars label with percentage

3. react bootstrap 5 progress bars with different color.

import { Container } from "react-bootstrap";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function ProgressBarExample() {
  return (
    <Container className="mt-5">
      <ProgressBar variant="success" now={40} />
      <ProgressBar variant="info" now={20} />
      <ProgressBar variant="warning" now={60} />
      <ProgressBar variant="danger" now={80} />
    </Container>
  );
}

react bootstrap 5 progress bars with different color

4. react bootstrap 5 progress bars gradient striped effect.

import { Container } from "react-bootstrap";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function ProgressBarExample() {
  return (
    <Container className="mt-5">
      <ProgressBar striped variant="success" now={40} />
      <ProgressBar striped variant="info" now={20} />
      <ProgressBar striped variant="warning" now={60} />
      <ProgressBar striped variant="danger" now={80} />
    </Container>
  );
}

react bootstrap 5 progress bars gradient striped effect

5. react bootstrap 5 progress bars with animation.

import { Container } from "react-bootstrap";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function ProgressBarExample() {
  return (
    <Container className="mt-5">
      <ProgressBar animated now={60}/>
    </Container>
  );
}

react bootstrap 5 progress bars with animation

6. react bootstrap 5 progress bars with Stacked.

import { Container } from "react-bootstrap";
import ProgressBar from "react-bootstrap/ProgressBar";

export default function ProgressBarExample() {
  return (
    <Container className="mt-5">
      <ProgressBar>
        <ProgressBar striped variant="success" now={35} key={1} />
        <ProgressBar variant="warning" now={20} key={2} />
        <ProgressBar striped variant="danger" now={10} key={3} />
      </ProgressBar>
    </Container>
  );
}

react bootstrap 5 progress bars with Stacked