Reactstrap — Progress Bars

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a progress bar with Reactstrap.

Progress

We can add a progress bar with the Progress component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress value={2 * 20} />
      <Progress color="success" value="25" />
      <Progress color="info" value={50} />
      <Progress color="warning" value={75} />
      <Progress color="danger" value="100" />
    </div>
  );
}

to display various progress bars.

The value prop lets us change the amount of the bar that’s filled.

color has the color and they’re the variants that are shown.

Multiple Segments

We can create a progress bar that has multiple segments.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress bar value="15">
          foo
        </Progress>
        <Progress bar color="success" value="30">
          bar
        </Progress>
        <Progress bar color="info" value="25">
          baz
        </Progress>
        <Progress bar color="warning" value="20">
          qux
        </Progress>
        <Progress bar color="danger" value="5">
          !!
        </Progress>
      </Progress>
    </div>
  );
}

We have a Progress components that wraps around other Progress components.

The multi prop lets us add a progress bar with multiple segments.

The inner bars has the bar component with the color to specify their color.

The value is the value out of 100.

Striped

We can make a progress bar striped with the striped prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress striped color="info" value={50} />
    </div>
  );
}

to add a striped progress bar.

This also works with progress bars with multiple segments:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress striped bar value="10" />
        <Progress striped bar color="success" value="20" />
        <Progress striped bar color="warning" value="30" />
        <Progress striped bar color="danger" value="20" />
      </Progress>
    </div>
  );
}

We’ve to add the striped prop to each bar.

Animated

We can make the progress bar animated by using the animated prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress animated color="info" value={50} />
    </div>
  );
}

to make it animated.

We can do the same thing with multi-segment progress bars:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress animated bar value="10" />
        <Progress animated bar color="success" value="20" />
        <Progress animated bar color="warning" value="30" />
        <Progress animated bar color="danger" value="20" />
      </Progress>
    </div>
  );
}

the animated prop is applied to each segment.

Conclusion

We can add a progress bar with multiple segments and different colors.

They can also be striped or animated.