Default progress bar
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> </div>
Progress Bar Sizes
Small
Default
Large
Extra Large
<div class="mb-1 text-base font-medium dark:text-white">Small</div> <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4 dark:bg-gray-700"> <div class="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style="width: 45%"></div> </div> <div class="mb-1 text-base font-medium dark:text-white">Default</div> <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700"> <div class="bg-blue-600 h-2.5 rounded-full dark:bg-blue-500" style="width: 45%"></div> </div> <div class="mb-1 text-lg font-medium dark:text-white">Large</div> <div class="w-full h-4 mb-4 bg-gray-200 rounded-full dark:bg-gray-700"> <div class="h-4 bg-blue-600 rounded-full dark:bg-blue-500" style="width: 45%"></div> </div> <div class="mb-1 text-lg font-medium dark:text-white">Extra Large</div> <div class="w-full h-6 bg-gray-200 rounded-full dark:bg-gray-700"> <div class="h-6 bg-blue-600 rounded-full dark:bg-blue-500" style="width: 45%"></div> </div>
Progress Bar With Label Outside
Flowbite
45%
Progress Bar With Label Inside
45%
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700"> <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: 45%"> 45%</div> </div>
Progress Bar With Colors
Dark
Blue
Red
Green
Yellow
Indigo
Purple
<div class="mb-1 text-base font-medium dark:text-white">Dark</div> <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700"> <div class="bg-gray-600 h-2.5 rounded-full dark:bg-gray-300" style="width: 45%"></div> </div> <div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue</div> <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700"> <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> </div> <div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div> <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700"> <div class="bg-red-600 h-2.5 rounded-full dark:bg-red-500" style="width: 45%"></div> </div> <div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</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-yellow-700 dark:text-yellow-500">Yellow</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-indigo-700 dark:text-indigo-500">Indigo</div> <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700"> <div class="bg-indigo-600 h-2.5 rounded-full dark:bg-indigo-500" style="width: 45%"></div> </div> <div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-500">Purple</div> <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700"> <div class="bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 45%"></div> </div>
