- Elements
- Progress Bar
Basic
Code
<!-- primary -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-primary h-4 rounded-full w-3/12"></div>
</div>
<!-- secondary -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-secondary h-4 rounded-full w-4/12"></div>
</div>
<!-- success -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-success h-4 rounded-full w-5/12"></div>
</div>
<!-- warning -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-warning h-4 rounded-full w-6/12"></div>
</div>
<!-- danger -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-danger h-4 rounded-full w-7/12"></div>
</div>
<!-- info -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-info h-4 rounded-full w-8/12"></div>
</div>
<!-- black -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-black dark:bg-dark h-4 rounded-full w-9/12"></div>
</div>
Gradient
Code
<!-- gradient primary -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#0081ff] to-[#0045ff] h-4 rounded-full w-3/12"></div>
</div>
<!-- gradient info -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#04befe] to-[#4481eb] h-4 rounded-full w-4/12"></div>
</div>
<!-- gradient success -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#3cba92] to-[#0ba360] h-4 rounded-full w-5/12"></div>
</div>
<!-- gradient warning -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#f09819] to-[#ff5858] h-4 rounded-full w-6/12"></div>
</div>
<!-- gradient danger -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#d09693] to-[#c71d6f] h-4 rounded-full w-7/12"></div>
</div>
<!-- gradient secondary -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#7579ff] to-[#b224ef] h-4 rounded-full w-8/12"></div>
</div>
<!-- gradient dark -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-gradient-to-r from-[#2b5876] to-[#4e4376] h-4 rounded-full w-9/12"></div>
</div>
Striped
Code
<!-- Striped -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-primary h-4 rounded-full w-3/12" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
</div>
Animated
Code
<!-- animated -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-primary h-4 rounded-full w-6/12 animated-progress" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
</div>
Labels
Code80%
PHP90%
<!-- labels -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-info h-4 rounded-full w-6/12 text-center text-white text-xs">80%</div>
</div>
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full">
<div class="bg-danger h-4 rounded-full w-8/12 text-center text-white flex justify-between items-center px-2 text-xs"><span>PHP</span><span>90%</span></div>
</div>
Stacked
CodeBasic
Striped
Animated
<!-- Striped -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-success h-4 ltr:rounded-l-full rtl:rounded-r-full w-2/12 text-center text-white text-xs"></div>
<div class="bg-warning h-4 w-4/12 text-center text-white text-xs"></div>
<div class="bg-danger h-4 ltr:rounded-r-full rtl:rounded-l-full w-3/12 text-center text-white text-xs"></div>
</div>
<!-- Striped -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-primary h-4 ltr:rounded-l-full rtl:rounded-r-full w-2/12 text-center text-white text-xs" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
<div class="bg-success h-4 w-4/12 text-center text-white text-xs" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
<div class="bg-info h-4 ltr:rounded-r-full rtl:rounded-l-full w-3/12 text-center text-white text-xs" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
</div>
<!-- Striped -->
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-info h-4 ltr:rounded-l-full rtl:rounded-r-full w-2/12 animated-progress text-center text-white text-xs" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
<div class="bg-secondary h-4 w-4/12 animated-progress text-center text-white text-xs" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
<div class="bg-primary h-4 ltr:rounded-r-full rtl:rounded-l-full w-3/12 animated-progress text-center text-white text-xs" style="background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent); background-size: 1rem 1rem;"></div>
</div>
Progress Bars Different Sizes
CodeDefault Progress Bar Size
Progress-sm
Progress-md
Progress-lg
Progress-xl
<!-- default -->
<div class="space-y-1">
<h3 class="text-primary">Default Progress Bar Size</h3>
<div class="w-full h-4 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-primary h-4 rounded-full rounded-bl-full w-3/12 text-center text-white text-xs"></div>
</div>
</div>
<!-- small -->
<div class="space-y-2">
<h3 class="text-base text-success">Progress-sm</h3>
<div class="w-full h-1 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-success h-1 rounded-full rounded-bl-full w-5/12 text-center text-white text-xs"></div>
</div>
</div>
<!-- medium -->
<div class="space-y-2">
<h3 class="text-base text-warning">Progress-md</h3>
<div class="w-full h-2.5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-warning h-2.5 rounded-full rounded-bl-full w-7/12 text-center text-white text-xs"></div>
</div>
</div>
<!-- large -->
<div class="space-y-2">
<h3 class="text-base text-info">Progress-lg</h3>
<div class="w-full h-5 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-info h-5 rounded-full rounded-bl-full w-8/12 text-center text-white text-xs"></div>
</div>
</div>
<!-- default -->
<div class="space-y-2">
<h3 class="text-base text-danger">Progress-xl</h3>
<div class="w-full h-6 bg-[#ebedf2] dark:bg-dark/40 rounded-full flex">
<div class="bg-danger h-6 rounded-full rounded-bl-full w-10/12 text-center text-white text-xs"></div>
</div>
</div>
© . Vristo All rights reserved.