Tailwind CSS Progress
Documentation and examples for using TailwindCSS custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Default Progress
Use the following example of a progress bar element to show a completion rate of 20% by using an inline style and the utility classes from Tailwind CSS.
<div class="w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-green-600 h-1.5 rounded-full" style="width: 53%"></div>
</div>Height
You only set a height value on the
.progress
container.
<div class="w-full bg-gray-200 rounded-full h-1">
<div class="bg-green-600 h-1 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-5">
<div class="bg-green-600 h-5 rounded-full" style="width: 63%"></div>
</div>Labels
Add labels to your progress bars by placing text within the
.progress
.
53%
<div class="w-full bg-gray-200 rounded-full h-5">
<div class="bg-green-600 h-5 rounded-full text-center text-white whitespace-nowrap" style="width: 53%">53%</div>
</div>Colors
You can also apply any color using the
bg-{color}
utility classes from Tailwind CSS. .
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-400 h-2 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-600 h-2 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-cyan-500 h-2 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-indigo-500 h-2 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-pink-500 h-2 rounded-full" style="width: 53%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-500 h-2 rounded-full" style="width: 53%"></div>
</div>