Progress

Progress Bar

You can use progress-bar class to create progress bar. 

 <div class="flex flex-col gap-2">
   <div class="progress-bar">
       <div class="bg-primary" style="width:0%"></div>
   </div>
   <div class="progress-bar">
       <div class="bg-secondary" style="width:10%"></div>
   </div>
   <div class="progress-bar">
       <div class="bg-info" style="width:40%"></div>
   </div>
   <div class="progress-bar">
       <div class="bg-success" style="width:70%"></div>
   </div>
   <div class="progress-bar">
       <div class="bg-warning" style="width:100%"></div>
   </div>
</div>

With Label Inside

You can use progress-bar class with the label inside for progress bar.

0%
10%
40%
70%
100%
 <div class="flex flex-col gap-2">
   <div class="progress-bar">
       <div class="bg-primary text-[9px] font-bold text-center" style="width:0%"></div>
   </div>
    <div class="progress-bar">
       <div class="bg-secondary text-[9px] font-bold text-center" style="width:10%"></div>
   </div>
    <div class="progress-bar">
       <div class="bg-info text-[9px] font-bold text-center" style="width:40%"></div>
   </div>
    <div class="progress-bar">
       <div class="bg-success text-[9px] font-bold text-center" style="width:70%"></div>
   </div>
    <div class="progress-bar">
       <div class="bg-warning text-[9px] font-bold text-center" style="width:100%"></div>
   </div>
</div>

Sizes

Using .progress-* class to create the size of progress bar.

Small
Medium
Large
Extra-Large
 <div class="flex flex-col gap-3">
   <div class="flex flex-col gap-1">
      <div class="text-sm font-medium">Small</div>
      <div class="progress-bar progress-sm">
          <div class="bg-primary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
      <div class="text-sm font-medium">Medium</div>
      <div class="progress-bar progress-md">
          <div class="bg-secondary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
      <div class="text-sm font-medium">Large</div>
      <div class="progress-bar progress-lg">
          <div class="bg-info" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
      <div class="text-sm font-medium">Extra-Large</div>
      <div class="progress-bar progress-xl">
          <div class="bg-success" style="width:70%"></div>
      </div>
   </div>
</div>

With Lable

You can use progress-bar class with the label for progress bar.

Primary
Secondary
Info
Success
 <div class="flex flex-col gap-3">
   <div class="flex flex-col gap-1">
       <div class="text-sm font-medium">Primary</div>
       <div class="progress-bar">
           <div class="bg-primary" style="width:20%"></div>
       </div>
   </div>
   <div class="flex flex-col gap-1">
       <div class="text-sm font-medium">Secondary</div>
       <div class="progress-bar">
           <div class="bg-secondary" style="width:40%"></div>
       </div>
   </div>
   <div class="flex flex-col gap-1">
       <div class="text-sm font-medium">Info</div>
       <div class="progress-bar">
           <div class="bg-info" style="width:60%"></div>
       </div>
   </div>
   <div class="flex flex-col gap-1">
       <div class="text-sm font-medium">Success</div>
       <div class="progress-bar">
           <div class="bg-success" style="width:80%"></div>
       </div>
   </div>
</div>

Multiple Bar

You can set Multiple bar 

 <div class="flex flex-col gap-2">
   <div class="progress-bar progress-lg multi-bar">
       <div class="flex">
          <div class="bg-primary" style="width:10%"></div>
          <div class="bg-secondary !rounded-none" style="width:15%"></div>
          <div class="bg-info" style="width:25%"></div>
       </div>
   </div>
   <div class="progress-bar progress-lg multi-bar">
       <div class="flex">
          <div class="bg-sucess" style="width:5%"></div>
          <div class="bg-warning !rounded-none" style="width:22%"></div>
          <div class="bg-danger" style="width:50%"></div>
       </div>
   </div>
   <div class="progress-bar progress-lg multi-bar">
       <div class="flex">
          <div class="bg-light rounded-l-2xl" style="width:45%"></div>
          <div class="bg-warning" style="width:22%"></div>
       </div>
   </div>
</div>

With label Chip

You can use progress-bar class with the label chip for progress bar.

Loading40%
Loading55%
 <div class="flex flex-col gap-2">
   <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center">
          <span class="text-sm font-medium">Loading</span>
          <span class="text-sm font-medium bg-primary-light px-2 py-1">40%</span> 
       </div>
       <div class="progress-bar">
           <div class="bg-primary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center">
          <span class="text-sm font-medium">Processing</span>
          <span class="text-sm font-medium bg-primary-light px-2 py-1">40%</span> 
       </div>
       <div class="progress-bar">
           <div class="bg-secondary" style="width:70%"></div>
      </div>
   </div>
</div>

Copyright 2023 © Dexo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Reset Buy Now