Default Progress bars
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary linear" style="width: 60%; height:5px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Striped Progress bar
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden 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
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger" style="width: 60%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success" style="width: 20%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary" style="width: 30%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning" style="width: 80%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Different bar sizes
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger" style="width: 60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info" style="width: 40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success" style="width: 20%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary" style="width: 30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning" style="width: 80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Animated Striped bar
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden active progress-bar-striped bg-danger" style="width: 60%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info active progress-bar-striped" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success active progress-bar-striped" style="width: 20%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary active progress-bar-striped" style="width: 30%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning active progress-bar-striped" style="width: 80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Vertical Progress bars
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Vertical Progress From bottom
<div class="progress progress-vertical-bottom relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md rotate-180">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md rotate-180">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md rotate-180">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md rotate-180">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md rotate-180">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Different size Progress bars
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info" style="width:6px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success" style="width:8px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary" style="width:10px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical relative inline-block lg:mr-8 mr-4 min-h-[17rem] bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning" style="width:14px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
Animated bars
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger duration-500 animate-myanimation" style="width: 60%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info duration-500 animate-myanimation" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success duration-500 animate-myanimation" style="width: 20%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary duration-500 animate-myanimation" style="width: 30%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-warning duration-500 animate-myanimation" style="width: 80%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md mt-4">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-primary duration-500 animate-myanimation" style="width: 40%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
SKILL BARS
Photoshop 85%
Code editor 90%
Illustrator 65%
<h6 class="mb-2">Photoshop
<span class="pull-end">85%</span>
</h6>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-danger duration-500 animate-myanimation" style="width: 85%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mb-2 mt-4">Code editor
<span class="pull-end">90%</span>
</h6>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-info duration-500 animate-myanimation" style="width: 90%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mb-2 mt-4">Illustrator
<span class="pull-end">65%</span>
</h6>
<div class="progress bg-[#f6f6f6] dark:bg-[#1E1E1E] h-[5px] overflow-hidden flex rounded-md">
<div class="progress-bar flex flex-col rounded-md justify-center overflow-hidden bg-success duration-500 animate-myanimation" style="width: 65%; " role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>