Components

Tailwind CSS Progress Bar

The tailwind progress bar represents completion rate of the task which can be represented in various styles.

Tailwind css lets you customize progress bar in terms of styles and colors

Default progress bar

Using progress bar tailwind css utility class you can implement the following basic progress bar.

<div class='w-full  bg-gray-100 rounded-3xl h-2.5 '>
      <div class='bg-indigo-600 h-2.5 rounded-3xl' style='width: 50%'></div>
      </div>

Progress bar with label

This tailwind ui progress bar displays more information alongside the progress it also shows remaining or completed percentage in the form of label.

50% 
<div class='relative flex items-center'>
      <div class='relative w-full h-2.5  overflow-hidden rounded-3xl bg-gray-100'>
        <div role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%' class='flex h-full items-center justify-center bg-indigo-600  text-white rounded-3xl'></div>
      </div>
      <span class='ml-2 bg-white  rounded-full  text-gray-800 text-xs font-medium flex justify-center items-center '>50%</span>
      </div>

Progress bar with label inside

Here, in this style you can show a label inside the progress bar..

50%
<div class='w-full  bg-gray-100 rounded-3xl h-3.5 '>
      <div class='bg-indigo-600 h-3.5 rounded-3xl text-xs text-white text-center' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'>50%</div>
      </div>

Progress bar with floating label

The label moves with the progress of the bar is known as a floating label. Following tailwind progress bar can be used in animation .

50% 
<div class='relative w-full pt-12'>
      <span class='absolute bottom-0 mb-4 -translate-x-1/2 w-12 h-10 bg-white shadow-[0px_12px_30px_0px_rgba(16,24,40,0.1)] rounded-full px-3.5 py-2 text-gray-800 text-xs font-medium flex justify-center items-center after:absolute after:bg-white after:flex after:bottom-[-5px] after:left-1/2 after:-z-10 after:h-3 after:w-3 after:-translate-x-1/2 after:rotate-45' style='left: 50%'>50%</span>
      <div class='relative flex w-full h-2.5  overflow-hidden rounded-3xl bg-gray-100'>
      <div role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%' class='flex h-full items-center justify-center bg-indigo-600  text-white rounded-3xl'></div>
      </div>
      </div>

Progress bar with sizes

Different sizing utility classes enable you to keep different sizes of the progress bars in tailwind css.

<div class='w-full  bg-gray-100 rounded-3xl h-1.5 '>
      <div role='progressbar' class='bg-indigo-600 h-1.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 '>
      <div role='progressbar' class='bg-indigo-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <div class='w-full  bg-gray-100 rounded-3xl h-4 '>
      <div role='progressbar' class='bg-indigo-600 h-4 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <div class='w-full  bg-gray-100 rounded-3xl h-6 '>
      <div role='progressbar' class='bg-indigo-600 h-6 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>

Vertical progress bar

In this tailwind progress bar you can display completion of tasks or progress vertically.

<div class='flex flex-col flex-nowrap justify-end bg-gray-100 rounded-3xl w-2 h-32 '>
      <div role='progressbar' class='bg-indigo-600 w-2 h-32 rounded-3xl' aria-valuenow='10' aria-valuemin='0' aria-valuemax='100' style='height:10%'></div>
      </div>
      <div class='flex flex-col flex-nowrap justify-end bg-gray-100 rounded-3xl w-2 h-32 '>
      <div role='progressbar' class='bg-indigo-600 w-2 h-32 rounded-3xl' aria-valuenow='25' aria-valuemin='0' aria-valuemax='100' style='height: 25%'></div>
      </div>
      <div class='flex flex-col flex-nowrap justify-end bg-gray-100 rounded-3xl w-2 h-32 '>
      <div role='progressbar' class='bg-indigo-600 w-2 h-32 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='height: 50%'></div>
      </div>
      <div class='flex flex-col flex-nowrap justify-end bg-gray-100 rounded-3xl w-2 h-32 '>
      <div role='progressbar' class='bg-indigo-600 w-2 h-32 rounded-3xl' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='height: 80%'></div>
      </div>
      <div class='flex flex-col flex-nowrap justify-end bg-gray-100 rounded-3xl w-2 h-32 '>
      <div role='progressbar' class='bg-indigo-600 w-2 h-32 rounded-3xl' aria-valuenow='90' aria-valuemin='0' aria-valuemax='100' style='height: 90%'></div>
      </div>

Progress bar with colors

By using “BG-{color}” classes available in tailwind css you can show different colors in the background of the progress bar.

Indigo
Red
Yellow
Green
Purple
Orange
Dark 
<span class='text-lg mb-1 text-indigo-600'>Indigo</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-indigo-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <span class='text-lg mb-1 text-red-600'>Red</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-red-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <span class='text-lg mb-1 text-yellow-600'>Yellow</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-yellow-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <span class='text-lg mb-1 text-green-600'>Green</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-green-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <span class='text-lg mb-1 text-purple-600'>Purple</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-purple-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <span class='text-lg mb-1 text-orange-600'>Orange</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-orange-600 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>
      <span class='text-lg mb-1 text-gray-900'>Dark</span>
      <div class='w-full  bg-gray-100 rounded-3xl h-2.5 mb-4'>
      <div role='progressbar' class='bg-gray-900 h-2.5 rounded-3xl' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>

multiple bar

This container based bar lets you add different colors at different places of the progress bar. 

<div class='flex w-full  bg-gray-100 rounded-3xl h-2.5 overflow-hidden'>
      <div role='progressbar' class='flex flex-col justify-center overflow-hidden bg-indigo-600 h-2.5 ' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100' style='width: 20%'></div>
      <div role='progressbar' class='flex flex-col justify-center overflow-hidden bg-orange-600 h-2.5 ' aria-valuenow='30' aria-valuemin='0' aria-valuemax='100' style='width: 30%'></div>
      <div role='progressbar' class='flex flex-col justify-center overflow-hidden bg-gray-900 h-2.5 ' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width: 50%'></div>
      </div>