Progress

Progress Bar

Use .progress-bar class to create progress bar. 

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

With Label Inside

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 dark:bg-border-dark">
       <div class="leading-[1.2] bg-primary text-[0.5625rem] font-bold text-center" style="width:0%"> 0% </div>
   </div>
    <div class="progress-bar dark:bg-border-dark">
       <div class="leading-[1.2] bg-secondary text-[0.5625rem] font-bold text-center" style="width:10%"> 10% </div>
   </div>
    <div class="progress-bar dark:bg-border-dark">
       <div class="leading-[1.2] bg-info text-[0.5625rem] font-bold text-center" style="width:40%">40%</div>
   </div>
    <div class="progress-bar dark:bg-border-dark">
       <div class="leading-[1.2] bg-success text-[0.5625rem] font-bold text-center" style="width:70%">70%</div>
   </div>
    <div class="progress-bar dark:bg-border-dark">
       <div class="leading-[1.2] bg-warning text-[0.5625rem] font-bold text-center" style="width:100%">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-xs font-medium text-content3">Small</div>
      <div class="progress-bar progress-sm dark:bg-border-dark">
          <div class="bg-primary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
      <div class="text-xs font-medium text-content3">Medium</div>
      <div class="progress-bar progress-md dark:bg-border-dark">
          <div class="bg-secondary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
      <div class="text-xs font-medium text-content3">Large</div>
      <div class="progress-bar progress-lg dark:bg-border-dark">
          <div class="bg-info" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
      <div class="text-xs font-medium text-content3">Extra Large</div>
      <div class="progress-bar progress-xl dark:bg-border-dark">
          <div class="bg-success" style="width:70%"></div>
      </div>
   </div>
</div>

With Label

Set progress bar with label using .progress-bar class.

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

Multiple Bar

Include multiple progress bars in a progress component if you need. 

<div class="flex flex-col gap-2">
   <div class="progress-bar progress-lg multi-bar dark:bg-border-dark">
       <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 dark:bg-border-dark">
       <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 progress-lg multi-bar dark:bg-border-dark">
       <div class="flex">
          <div class=" bg-warning rounded-l-2xl" style="width:45%"></div>
          <div class="bg-light" style="width:22%"></div>
       </div>
   </div>
   <div class="progress-bar progress-lg multi-bar dark:bg-border-dark">
       <div class="flex">
          <div class="bg-success" style="width:45%"></div>
          <div class="bg-info !rounded-none" style="width:22%"></div>
          <div class="bg-secondary" style="width:15%"></div>
       </div>
   </div>
</div>

With label Chip

Use .progress-bar class with the label chip for progress bar.

Progress40%
Loading 55%
<div class="flex flex-col gap-2">
   <div class="flex flex-col gap-1">
       <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-primary-light">40%</span> 
       </div>
       <div class="progress-bar dark:bg-border-dark">
           <div class="bg-primary" style="width:70%"></div>
      </div>
   </div>
   <div class="flex flex-col gap-1">
       <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-secondary-light">55%</span> 
       </div>
       <div class="progress-bar dark:bg-border-dark">
           <div class="bg-secondary" style="width:70%"></div>
      </div>
   </div>
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode