React Progress Bar - Flowbite

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.

"use client";

import { Progress } from "flowbite-react";

export 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.

"use client";

import { Progress } from "flowbite-react";

export 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.

"use client";

import { Progress } from "flowbite-react";

export 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.

"use client";

import { Progress } from "flowbite-react";

export 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.

"use client";

import { Progress } from "flowbite-react";

export 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>
  );
}

Circular Progress#

Use this Circular progress 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.

"use client";

import { Progress } from "flowbite-react";

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

Circular Progress With Text#

Use this Circular progress 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.

"use client";

import { Progress } from "flowbite-react";

export function Component() {
  return <Progress.Circular progress={45} textLabel="45%" />;
}

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"
  },
  "circular": {
    "base": "relative size-40",
    "bar": "size-full -rotate-90",
    "color": {
      "barColor": {
        "dark": "stroke-current text-gray-600 dark:text-gray-300",
        "blue": "stroke-current text-blue-600",
        "red": "stroke-current text-red-600 dark:text-red-500",
        "green": "stroke-current text-green-600 dark:text-green-500",
        "yellow": "stroke-current text-yellow-400",
        "indigo": "stroke-current text-indigo-600 dark:text-indigo-500",
        "purple": "stroke-current text-purple-600 dark:text-purple-500",
        "cyan": "stroke-current text-cyan-600",
        "gray": "stroke-current text-gray-500",
        "lime": "stroke-current text-lime-600",
        "pink": "stroke-current text-pink-500",
        "teal": "stroke-current text-teal-600"
      },
      "bgColor": "stroke-current text-gray-200 dark:text-neutral-700"
    },
    "label": {
      "base": "absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform",
      "text": "text-center text-2xl font-bold",
      "textColor": {
        "dark": "text-gray-600 dark:text-gray-300",
        "blue": "text-blue-600",
        "red": "text-red-600 dark:text-red-500",
        "green": "text-green-600 dark:text-green-500",
        "yellow": "text-yellow-400",
        "indigo": "text-indigo-600 dark:text-indigo-500",
        "purple": "text-purple-600 dark:text-purple-500",
        "cyan": "text-cyan-600",
        "gray": "text-gray-500",
        "lime": "text-lime-600",
        "pink": "text-pink-500",
        "teal": "text-teal-600"
      }
    }
  }
}

References#

• Flowbite Progress Bar