- عناصر
- نوار پیشرفت
ساده
نمونه کد
<!-- 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 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 -->
<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 -->
<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>
برچسب دار
نمونه کد80%
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>
استک
نمونه کدساده
راه راه
متحرک
<!-- 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>
اندازه های مختلف
نمونه کداندازه پیش فرض
کوچک-sm
متوسط-md
بزرگ-lg
خیلی بزرگ-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>
© روشاک