Components
Tailwind CSS Progress Bar Components - Madhuranjan UI
Explore a collection of stylish and functional progress bar components built with Tailwind CSS. These progress bars offer various visual representations of progress, are fully responsive, and support both light and dark themes.
Simple Progress Bar
A straightforward progress bar for displaying progress with a clean and simple design.
1<div class="w-full mx-auto bg-violet-200 dark:bg-blue-200 rounded-full h-4">
2 <div class="h-4 rounded-full bg-violet-600 dark:bg-blue-600 w-1/2"></div>
3</div>
4Progress Bar with Custom Height
Customize the height of the progress bar to better fit your UI requirements.
1 <div class="w-full max-w-md mx-auto space-y-4">
2 <!-- {/* Progress 1 - 20% */} -->
3 <div class="w-full bg-violet-200 dark:bg-blue-200 rounded-full h-2">
4 <div class="h-2 w-[20%] bg-violet-600 dark:bg-blue-600 rounded-full"></div>
5 </div>
6
7 <!-- {/* Progress 2 - 40% */} -->
8 <div class="w-full bg-violet-200 dark:bg-blue-200 rounded-full h-3">
9 <div class="h-3 w-[40%] bg-violet-600 dark:bg-blue-600 rounded-full"></div>
10 </div>Progress Bar with Percentage Inside
This variant displays the progress percentage within the bar itself.
20%
40%
75%
Almost Completed
Done
1<div class="bg-red-50 p-5 dark:bg-gray-900">
2 <div class="mx-auto w-full max-w-md space-y-4 text-sm font-medium text-white">
3 <!-- {/* Progress 1 - 20% */}. -->
4 <div class="relative h-4 w-full overflow-hidden rounded-full bg-violet-200 dark:bg-blue-200">
5 <div class="flex h-4 w-1/5 items-center justify-center rounded-full bg-violet-600 dark:bg-blue-600">
6 <span>20%</span>
7 </div>
8 </div>
9
10 <!-- {/* Progress 2 - 40% */} -->Colored Progress Bar
A vibrant progress bar that lets you choose from a range of colors to match your theme.
25%
40%
50%
60%
66%
75%
80%
85%
90%
Complete
1<div class="p-5 bg-red-50 dark:bg-gray-900">
2 <div class="w-full max-w-md mx-auto space-y-4 text-white font-medium text-sm">
3
4 <!-- {/* Red */} -->
5 <div class="w-full bg-red-200 dark:bg-red-800 rounded-full h-5 overflow-hidden">
6 <div class="h-5 w-1/4 bg-red-600 rounded-full flex items-center justify-center">
7 <span>25%</span>
8 </div>
9 </div>
10Vertical Progress Bar
A vertically oriented progress bar ideal for side panels or non-horizontal layouts.
1 <div class="flex items-end space-x-3">
2 <div class="relative flex h-72 w-5 flex-col-reverse overflow-hidden rounded-lg bg-red-400 dark:bg-red-800">
3 <div class="absolute inset-x-0 bottom-0 flex h-1/4 items-center justify-center bg-red-600 text-xs text-white"></div>
4 </div>
5
6 <div class="relative flex h-72 w-5 flex-col-reverse overflow-hidden rounded-lg bg-orange-400 dark:bg-orange-800">
7 <div class="absolute inset-x-0 bottom-0 flex h-2/5 items-center justify-center bg-orange-500 text-xs text-white"></div>
8 </div>
9
10 <div class="relative flex h-72 w-5 flex-col-reverse overflow-hidden rounded-lg bg-amber-400 dark:bg-amber-800">Progress Bar Variants
Discover different variants of progress bars, each with a unique visual style.
Basic Progress (50%)
25%
Gradient Progress (75%)
Fully Completed (100%)
Complete
Segmented Progress
Thicker Progress (60%)
Pill Shaped Progress (80%)
Done
1 <div class="p-6 space-y-6 w-full max-w-4xl mx-auto">
2 <div>
3 <div class="mb-1 text-sm font-medium text-gray-700 dark:text-gray-100">
4 Basic Progress (50%)
5 </div>
6 <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
7 <div class="bg-blue-500 dark:bg-blue-400 h-2 rounded-full w-1/2"></div>
8 </div>
9 </div>
10Step Progress Bar
A step-based progress bar designed to guide users through sequential tasks.
Blue Step Progress (50%)50%
Red Step Progress (25%)25%
Teal Step Progress (100%)100%
Longer Step Progress (50%)50%
Compact Red Steps (25%)25%
Wide Teal Steps (100%)100%
1 <div class="p-6 space-y-8 md:max-w-xl lg:max-w-2xl mx-auto text-gray-800 dark:text-gray-200">
2 <div>
3 <div class="flex items-center justify-between mb-2">
4 <span class="text-sm font-medium">Blue Step Progress (50%)</span>
5 <span class="text-sm font-medium">50%</span>
6 </div>
7 <div class="flex items-center gap-x-1">
8 {/* <!-- 2 Filled, 2 Unfilled --> */}
9 <div class="w-full h-2.5 bg-blue-600 dark:bg-blue-500 rounded transition duration-500"></div>
10 <div class="w-full h-2.5 bg-blue-600 dark:bg-blue-500 rounded transition duration-500"></div>Circular Progress Bar
A modern circular progress bar that provides a compact representation of progress.
70%
40%
90%
1 <div class="flex items-center justify-center gap-4 p-5">
2 <div class="relative inline-block">
3 <svg class="h-24 w-24" viewBox="0 0 42 42">
4 {/*
5 <!-- Background circle -->
6 */}
7 <circle class="text-gray-300 dark:text-gray-700" stroke-width="3" stroke="currentColor" fill="none" cx="21" cy="21" r="15.9155" />
8 <circle class="text-blue-500 dark:text-blue-400" stroke-width="3" stroke-linecap="round" stroke="currentColor" fill="none" cx="21" cy="21" r="15.9155" stroke-dasharray="100" stroke-dashoffset="30" />
9 </svg>
10 <div class="absolute inset-0 flex items-center justify-center text-xl font-semibold text-gray-800 dark:text-gray-200">70%</div>Gauge Progress Bar
A gauge-style progress bar that offers a dynamic, dial-like visualization of progress.
70%
90%
40%
1<div class="flex items-center justify-center gap-10 p-5 dark:bg-black flex-wrap">
2 <!-- Variant 1: Basic Gauge at 70% -->
3 <div class="relative inline-block h-16 w-32">
4 <!-- SVG is positioned absolutely to fill the container -->
5 <svg class="absolute top-0 left-0 h-full w-full" viewBox="0 0 100 50">
6 <!-- Background arc -->
7 <path d="M10,50 A40,40 0 0 1 90,50" class="text-gray-300 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="none" />
8 <!-- Progress arc: 70% → offset = 125.66 × (1 - 0.70) ≈ 37.7 -->
9 <path d="M10,50 A40,40 0 0 1 90,50" class="text-blue-500 dark:text-blue-400" stroke-width="8" stroke="currentColor" fill="none" stroke-dasharray="125.66" stroke-dashoffset="37.7" />
10 </svg>