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.
<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..
<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 .
<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>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
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.
<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>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More