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:

'use client';

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
  • React TypeScript
'use client';

import { Progress } from 'flowbite-react';

export default function DefaultProgress() {
  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%
  • React TypeScript
'use client';

import { Progress } from 'flowbite-react';

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

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%
  • React TypeScript
'use client';

import { Progress } from 'flowbite-react';

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

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
  • React TypeScript
'use client';

import { Progress } from 'flowbite-react';

export default function Sizing() {
  return (
    <div className="flex flex-col gap-2">
      <div className="text-base font-medium dark:text-white">
        Small
      </div>
      <Progress
        color="dark"
        progress={45}
        size="sm"
      />
      <div className="text-base font-medium dark:text-white">
        Default
      </div>
      <Progress
        color="dark"
        progress={45}
        size="md"
      />
      <div className="text-lg font-medium dark:text-white">
        Large
      </div>
      <Progress
        color="dark"
        progress={45}
        size="lg"
      />
      <div className="text-lg font-medium dark:text-white">
        Extra Large
      </div>
      <Progress
        color="dark"
        progress={45}
        size="xl"
      />
    </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
  • React TypeScript
'use client';

import { Progress } from 'flowbite-react';

export default function Colors() {
  return (
    <div className="flex flex-col gap-2">
      <div className="text-base font-medium">
        Dark
      </div>
      <Progress
        color="dark"
        progress={45}
      />
      <div className="text-base font-medium text-cyan-700">
        Blue
      </div>
      <Progress
        color="blue"
        progress={45}
      />
      <div className="text-base font-medium text-red-700">
        Red
      </div>
      <Progress
        color="red"
        progress={45}
      />
      <div className="text-base font-medium text-green-700">
        Green
      </div>
      <Progress
        color="green"
        progress={45}
      />
      <div className="text-base font-medium text-yellow-700">
        Yellow
      </div>
      <Progress
        color="yellow"
        progress={45}
      />
      <div className="text-base font-medium text-indigo-700">
        Indigo
      </div>
      <Progress
        color="indigo"
        progress={45}
      />
      <div className="text-base font-medium text-purple-700">
        Purple
      </div>
      <Progress
        color="purple"
        progress={45}
      />
    </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": "rounded-full text-center font-medium leading-none text-cyan-300 dark:text-cyan-100 space-x-2",
  "color": {
    "dark": "bg-gray-600 dark:bg-gray-300",
    "blue": "bg-cyan-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"
  },
  "size": {
    "sm": "h-1.5",
    "md": "h-2.5",
    "lg": "h-4",
    "xl": "h-6"
  }
}

References