React Progress Bar - Flowbite

The progress bar component is used to show the completion rate of a given task in the form of a filled bar where you can also add a label indicating percentage

Use the progress bar component from Flowbite React to show the percentage and completion rate of a given task using a visually friendly bar meter based on multiple styles and sizes.

Choose one of the examples below for your application and use the React props to update the progress fill rate, label, sizing, and colors and customize with the classes from Tailwind CSS.

To start using the progress bar component make sure you import it first from Flowbite React:

import { Progress } from "flowbite-react";

Default progress bar#

Use this example to show a progress bar where you can set the progress rate using the progress prop from React which should be a number from 1 to 100.

Edit on GitHub
"use client";

import { Progress } from "flowbite-react";

function Component() {
  return <Progress progress={45} />;
}

Progress bar with labels#

Use this example to show a progress bar with a label. You can set the label text using the textLabel prop and the progress text using the labelText prop.

Edit on GitHub
Flowbite50%
"use client";

import { Progress } from "flowbite-react";

function Component() {
  return <Progress progress={50} textLabel="Flowbite" size="lg" labelProgress labelText />;
}

Label positioning#

This example shows how you can position the label text inside the progress bar by using the React props called progressLabelPosition and textLabelPosition on the <Progress> component in React.

Edit on GitHub
Flowbite
45%
"use client";

import { Progress } from "flowbite-react";

function Component() {
  return (
    <Progress
      progress={45}
      progressLabelPosition="inside"
      textLabel="Flowbite"
      textLabelPosition="outside"
      size="lg"
      labelProgress
      labelText
    />
  );
}

Sizing#

The size prop from React can be used on the <Progress> component to set the size of the progress bar. You can choose from sm, md, lg and xl.

Edit on GitHub
Small
Default
Large
Extra Large
"use client";

import { Progress } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-col gap-2">
      <div className="text-base font-medium dark:text-white">Small</div>
      <Progress progress={45} size="sm" color="dark" />
      <div className="text-base font-medium dark:text-white">Default</div>
      <Progress progress={45} size="md" color="dark" />
      <div className="text-lg font-medium dark:text-white">Large</div>
      <Progress progress={45} size="lg" color="dark" />
      <div className="text-lg font-medium dark:text-white">Extra Large</div>
      <Progress progress={45} size="xl" color="dark" />
    </div>
  );
}

Colors#

Set your own custom colors for the progress bar component by using the color prop from React and the utility classes from Tailwind CSS.

Edit on GitHub
Dark
Blue
Red
Green
Yellow
Indigo
Purple
Cyan
Gray
Lime
Pink
Teal
"use client";

import { Progress } from "flowbite-react";

function Component() {
  return (
    <div className="flex flex-col gap-2">
      <div className="text-base font-medium">Dark</div>
      <Progress progress={45} color="dark" />
      <div className="text-base font-medium text-blue-700">Blue</div>
      <Progress progress={45} color="blue" />
      <div className="text-base font-medium text-red-700">Red</div>
      <Progress progress={45} color="red" />
      <div className="text-base font-medium text-green-700">Green</div>
      <Progress progress={45} color="green" />
      <div className="text-base font-medium text-yellow-700">Yellow</div>
      <Progress progress={45} color="yellow" />
      <div className="text-base font-medium text-indigo-700">Indigo</div>
      <Progress progress={45} color="indigo" />
      <div className="text-base font-medium text-purple-700">Purple</div>
      <Progress progress={45} color="purple" />
      <div className="text-base font-medium text-cyan-700">Cyan</div>
      <Progress progress={45} color="cyan" />
      <div className="text-base font-medium text-gray-700">Gray</div>
      <Progress progress={45} color="gray" />
      <div className="text-base font-medium text-lime-700">Lime</div>
      <Progress progress={45} color="lime" />
      <div className="text-base font-medium text-pink-700">Pink</div>
      <Progress progress={45} color="pink" />
      <div className="text-base font-medium text-teal-700">Teal</div>
      <Progress progress={45} color="teal" />
    </div>
  );
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "base": "w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700",
  "label": "mb-1 flex justify-between font-medium dark:text-white",
  "bar": "space-x-2 rounded-full text-center font-medium leading-none text-cyan-300 dark:text-cyan-100",
  "color": {
    "dark": "bg-gray-600 dark:bg-gray-300",
    "blue": "bg-blue-600",
    "red": "bg-red-600 dark:bg-red-500",
    "green": "bg-green-600 dark:bg-green-500",
    "yellow": "bg-yellow-400",
    "indigo": "bg-indigo-600 dark:bg-indigo-500",
    "purple": "bg-purple-600 dark:bg-purple-500",
    "cyan": "bg-cyan-600",
    "gray": "bg-gray-500",
    "lime": "bg-lime-600",
    "pink": "bg-pink-500",
    "teal": "bg-teal-600"
  },
  "size": {
    "sm": "h-1.5",
    "md": "h-2.5",
    "lg": "h-4",
    "xl": "h-6"
  }
}

References#