Progress

ADMIN PANEL

Progress Bar

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

Preview Html
   <div class="flex flex-col items-center justify-center gap-2">
   <div class="progress-bar w-80">
       <div class="bg-primary" style="width:0%"></div>
   </div>
   <div class="progress-bar w-80">
       <div class="bg-secondary" style="width:10%"></div>
   </div>
   <div class="progress-bar w-80">
       <div class="bg-info" style="width:40%"></div>
   </div>
   <div class="progress-bar w-80">
       <div class="bg-success" style="width:70%"></div>
   </div>
   <div class="progress-bar w-80">
       <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.

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

Sizes

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

Preview Html
Small
Medium
Large
Extra-Large
    <div class="flex flex-col items-center justify-center gap-2">
   <div class="flex flex-col gap-1 sm:w-full">
      <div class="text-sm font-medium">Small</div>
      <div class="progress-bar w-80 progress-sm">
          <div class="bg-primary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
      <div class="text-sm font-medium">Medium</div>
      <div class="progress-bar w-80 progress-md">
          <div class="bg-secondary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
      <div class="text-sm font-medium">Large</div>
      <div class="progress-bar w-80 progress-lg">
          <div class="bg-info" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
      <div class="text-sm font-medium">Extra-Large</div>
      <div class="progress-bar w-80 progress-xl">
          <div class="bg-success" style="width:70%"></div>
      </div>
   </div>
</div>

With label

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

Preview Html
Primary
Secondary
Info
Success
    <div class="flex flex-col items-center justify-center gap-2">
   <div class="flex flex-col gap-1 sm:w-full">
       <div class="text-xs font-medium">Primary</div>
       <div class="progress-bar w-80">
           <div class="bg-primary" style="width:20%"></div>
       </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
       <div class="text-xs font-medium">Secondary</div>
       <div class="progress-bar w-80">
           <div class="bg-secondary" style="width:40%"></div>
       </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
       <div class="text-xs font-medium">Info</div>
       <div class="progress-bar w-80">
           <div class="bg-info" style="width:60%"></div>
       </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
       <div class="text-xs font-medium">Success</div>
       <div class="progress-bar w-80">
           <div class="bg-success" style="width:80%"></div>
       </div>
   </div>
</div>

Multiple Bar

You can set Multiple bar

Preview Html
    <div class="flex flex-col items-center justify-center gap-2">
   <div class="progress-bar w-80 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 w-80 progress-lg multi-bar">
       <div class="flex">
          <div class="bg-success" 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 w-80 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.

Preview Html
Loading40%
Loading55%
    <div class="flex flex-col items-center justify-center gap-2">
   <div class="flex flex-col gap-1 sm:w-full">
       <div class="flex items-center justify-between">
          <span class="text-sm font-medium">Loading</span>
          <span class="px-2 py-1 text-sm font-medium bg-primaryLight">40%</span> 
       </div>
       <div class="progress-bar w-80">
           <div class="bg-primary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1 sm:w-full">
       <div class="flex items-center justify-between">
          <span class="text-sm font-medium">Processing</span>
          <span class="px-2 py-1 text-sm font-medium bg-secondaryLight">40%</span> 
       </div>
       <div class="progress-bar w-80">
           <div class="bg-secondary" style="width:70%"></div>
      </div>
   </div>
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now