Progressbar
Progressbar.
Make use of Tailwind's unique Progressbar styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
ProgressbarProgressbar
Default Progress bars
60% Complete
<div class="flex overflow-hidden h-1.25 bg-light rounded-md">
<div class="bg-primary rounded-md linear" style="width: 60%; height:5px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Striped Progress bar
<div class="flex overflow-hidden h-1.25 bg-light rounded-md">
<div class="rounded-md bg-info progress-bar-striped" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; height:5px;" role="progressbar">
<span class="sr-only">85% Complete (success)</span>
</div>
</div>
Colored Progress bar
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-danger" style="width: 60%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-info" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-success" style="width: 20%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-primary" style="width: 30%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-warning" style="width: 80%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-primary" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Different bar sizes
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-danger" style="width: 60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-auto bg-light rounded-md mt-4">
<div class="rounded-md bg-info" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-auto bg-light rounded-md mt-4">
<div class="rounded-md bg-success" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-auto bg-light rounded-md mt-4">
<div class="rounded-md bg-primary" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-auto bg-light rounded-md mt-4">
<div class="rounded-md bg-warning" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Animated Striped bar
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md active progress-bar-striped bg-danger" style="width: 60%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-info active progress-bar-striped" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-success active progress-bar-striped" style="width: 20%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-primary active progress-bar-striped" style="width: 30%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-warning active progress-bar-striped" style="width: 80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Vertical Progress bars
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Vertical Progress From bottom
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative rotate-180">
<div class="rounded-md bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative rotate-180">
<div class="rounded-md bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative rotate-180">
<div class="rounded-md bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative rotate-180">
<div class="rounded-md bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative rotate-180">
<div class="rounded-md bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Different size Progress bars
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-info" style="width:6px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-success" style="width:8px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-primary" style="width:10px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="overflow-hidden h-1.25 bg-light rounded-md inline-block mr-8 min-h-72 relative">
<div class="rounded-md bg-warning" style="width:14px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Animated bars
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-danger animate-progress" style="width: 60%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-info animate-progress" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-success animate-progress" style="width: 20%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-primary animate-progress" style="width: 30%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-warning animate-progress" style="width: 80%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md mt-4">
<div class="rounded-md bg-primary animate-progress" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
SKILL BARS
Photoshop 85%
60% Complete
Code editor 90%
60% Complete
Illustrator 65%
60% Complete
<div class="flex overflow-hidden h-1.25 bg-light rounded-md">
<div class="rounded-md bg-danger animate-progress" style="width: 85%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md">
<div class="rounded-md bg-info animate-progress" style="width: 90%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="flex overflow-hidden h-1.25 bg-light rounded-md">
<div class="rounded-md bg-success animate-progress" style="width: 65%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>