React Progress Bar - Flowbite

Use the progress bar component to show the completion rate of a data indicator or use it as a loader element

The progress bar component can be used as an indicator to show the completion rate of data sets or it can be used as an animated loader component. There are multiple sizes, colors, and styles available.

Default progress

<Progress progress={45} />

Sizing

Small

Default

Large

Extra Large

<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

Dark

Blue

Red

Green

Yellow

Indigo

Purple

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

With labels

Flowbite50%

<Progress
  labelProgress
  labelText
  progress={50}
  size="lg"
  textLabel="Flowbite"
/>

Label positions

Flowbite

45%

<Progress
  labelProgress
  labelText
  progress={45}
  progressLabelPosition="inside"
  size="lg"
  textLabel="Flowbite"
  textLabelPosition="outside"
/>