Progress components

Documentation and examples for using custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Basic example
This is a very basic progress bar that you may use in your panels to show the progress of tasks.
Default progress bar
Success progress bar
Info progress bar
Warning progress bar
Danger progress bar
Dark progress bar 
 <div class="progress">
    <div class="progress-bar w-6/12"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-success w-6/12"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-info w-6/12"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-warning w-6/12"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger w-6/12"></div>
</div>
<div class="progress">
    <div class="progress-bar bg-dark w-6/12"></div>
</div>
Animated background & customization
All of the progress bars can be animated with default tailwind animation classes and you can also customize their colors, height, etc based on your needs.
Pulse animation
Custom color
Change the border radius
Use more height for your progress 
 <div class="progress">
    <div class="progress-bar w-5/12 animate-pulse "></div>
</div>
<div class="progress">
    <div class="progress-bar bg-orange-400 w-6/12"></div>
</div>
<div class="progress h-5">
    <div class="progress-bar bg-success h-5 w-7/12"></div>
</div>
<div class="progress rounded-none">
    <div class="progress-bar bg-danger rounded-none w-8/12"></div>
</div>
Text labels
Add labels to your progress bars by placing text within the .progress-bar. * We highly recommend adding more height to your progress bar so text labels fit perfectly.
50%
 <div class="progress h-4">
    <div class="progress-bar h-4 w-6/12">50%</div>
</div>