Tailwind CSS Progress Bar

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 example

Use the following example of a progress bar element to show a completion rate of 45% by using an inline style and the utility classes from Tailwind CSS.

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-fuchsia-500 h-2.5 rounded-full" style="width: 45%"></div>
</div>

With label

And this is an example of using a progress bar outside the bar.

Completed 45%
<div class="flex justify-between mb-1">
  <span class="text-base font-medium text-fuchsia-700 dark:text-white">Completed</span>
  <span class="text-sm font-medium text-fuchsia-700 dark:text-white">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-fuchsia-500 h-2.5 rounded-full" style="width: 45%"></div>
</div>

Colors

You can also apply any color using the bg-{color} utility classes from Tailwind CSS and FlowBite.

Primary
Secondary
Info
Success
Danger
Warning
Dark
<div class="mb-1 text-base font-medium text-fuchsia-700 dark:text-fuchsia-500">
  Primary
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
  <div class="bg-fuchsia-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>
<div class="mb-1 text-base font-medium text-slate-700 dark:text-white">
  Secondary
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
  <div
    class="bg-slate-600 h-2.5 rounded-full dark:bg-slate-300"
    style="width: 45%"
  ></div>
</div>
<div class="mb-1 text-base font-medium text-cyan-700 dark:text-cyan-500">
  Info
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
  <div
    class="bg-cyan-600 h-2.5 rounded-full dark:bg-cyan-500"
    style="width: 45%"
  ></div>
</div>
<div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">
  Success
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
  <div
    class="bg-green-600 h-2.5 rounded-full dark:bg-green-500"
    style="width: 45%"
  ></div>
</div>
<div class="mb-1 text-base font-medium text-red-500 dark:text-red-500">
  Danger
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
  <div class="bg-red-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>
<div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">
  Warning
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
  <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>
<div class="mb-1 text-base font-medium text-dark-700 dark:text-dark-500">
  Dark
</div>

If you want more details about Progress component, please check the official docs on Flowbite.

Copied code to clipboard!