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.

<Progress progress={45} />
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>
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>
Flowbite50%
<Progress
  labelProgress
  labelText
  progress={50}
  size="lg"
  textLabel="Flowbite"
/>
Flowbite
45%
<Progress
  labelProgress
  labelText
  progress={45}
  progressLabelPosition="inside"
  size="lg"
  textLabel="Flowbite"
  textLabelPosition="outside"
/>