Modernize TailwindCSS HTML Admin Template

Progress Bars

Home
Progress Bars

Default Progress

Default Progress - View Code

   
<!-- Progress -->
<div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
</div>
<!-- End Progress -->

Determinate progress bars fill the container from 0 to 100%.

Straight bar

Straight bar - View Code

   
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
</div>

Bar with 0 radius, but rounded progress.

Just uploaded file

Just uploaded file - View Code

   
<!-- File Uploading Progress Form -->
<div>
   <!-- Uploading File Content -->
   <div class="mb-2 flex justify-between items-center">
      <div class="flex items-center gap-x-3">
         <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
         <img src="../assets/images/svgs/icon-xls.svg" alt="">
         </span>
         <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.xls</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
         </div>
      </div>
      <div class="inline-flex items-center gap-x-2">
         <a class="text-gray-500 hover:text-gray-800" href="#">
         <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
         </a>
         <a class="text-gray-500 hover:text-gray-800" href="#">
         <i class="ti ti-trash text-lg leading-tight font-medium"></i>
         </a>
      </div>
   </div>
   <!-- End Uploading File Content -->
   <!-- Progress Bar -->
   <div class="flex items-center gap-x-3 whitespace-nowrap">
      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
         <div class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 1%"></div>
      </div>
      <div class="w-6 text-end">
         <span class="text-sm text-gray-800 dark:text-white">0%</span>
      </div>
   </div>
   <!-- End Progress Bar -->
</div>
<!-- End File Uploading Progress Form -->

A single just uploaded file example.

preline-ui.xls

7 KB

In progress file

In progress file - View Code

   
<!-- File Uploading Progress Form -->
<div>
   <!-- Uploading File Content -->
   <div class="mb-2 flex justify-between items-center">
      <div class="flex items-center gap-x-3">
         <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
         <img src="../assets/images/svgs/icon-xls.svg" alt="">
         </span>
         <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.xls</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
         </div>
      </div>
      <div class="inline-flex items-center gap-x-2">
         <a class="text-gray-500 hover:text-gray-800" href="#">
         <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
         </a>
         <a class="text-gray-500 hover:text-gray-800" href="#">
         <i class="ti ti-trash text-lg leading-tight font-medium"></i>
         </a>
      </div>
   </div>
   <!-- End Uploading File Content -->
   <!-- Progress Bar -->
   <div class="flex items-center gap-x-3 whitespace-nowrap">
      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
         <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
      </div>
      <div class="w-6 text-end">
         <span class="text-sm text-gray-800 dark:text-white">25%</span>
      </div>
   </div>
   <!-- End Progress Bar -->
</div>
<!-- End File Uploading Progress Form -->

A single in progress file example.

preline-ui.xls

7 KB

25%

Completed

Completed - View Code

   
<!-- File Uploading Progress Form -->
<div>
   <!-- Uploading File Content -->
   <div class="mb-2 flex justify-between items-center">
      <div class="flex items-center gap-x-3">
         <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
         <img src="../assets/images/svgs/icon-xls.svg" alt="">
         </span>
         <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.xls</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
         </div>
      </div>
      <div class="inline-flex items-center gap-x-2">
         <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
         <i class="ti ti-check text-xs relative right-[0px]"></i>
         </span>
         <a class="text-gray-500 hover:text-gray-800" href="#">
         <i class="ti ti-trash text-lg leading-tight font-medium"></i>
         </a>
      </div>
   </div>
   <!-- End Uploading File Content -->
   <!-- Progress Bar -->
   <div class="flex items-center gap-x-3 whitespace-nowrap">
      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
         <div class="flex flex-col justify-center rounded-full overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
      </div>
      <div class="w-6 text-end">
         <span class="text-sm text-gray-800 dark:text-white">100%</span>
      </div>
   </div>
   <!-- End Progress Bar -->
</div>
<!-- End File Uploading Progress Form -->

This is a successfully uploaded file example.

preline-ui.xls

7 KB

100%

Error

Error - View Code

   
<!-- File Uploading Progress Form -->
<div>
   <!-- Uploading File Content -->
   <div class="mb-2 flex justify-between items-center">
      <div class="flex items-center gap-x-3">
         <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
         <img src="../assets/images/svgs/icon-xls.svg" alt="">
         </span>
         <div>
            <p class="font-semibold text-erroremphasis">preline-ui.xls</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
         </div>
      </div>
      <div class="inline-flex items-center gap-x-2">
         <a class="text-erroremphasis" href="#">
         <i class="ti ti-alert-triangle text-lg leading-tight font-medium"></i>
         </a>
         <a class="text-gray-500 hover:text-gray-800" href="#">
         <i class="ti ti-trash text-lg leading-tight font-medium"></i>
         </a>
      </div>
   </div>
   <!-- End Uploading File Content -->
   <!-- Progress Bar -->
   <div class="flex items-center gap-x-3 whitespace-nowrap">
      <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
         <div class="flex flex-col justify-center rounded-full overflow-hidden bg-error text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 25%"></div>
      </div>
      <div class="w-6 text-end">
         <span class="text-sm text-gray-800 dark:text-white">25%</span>
      </div>
   </div>
   <!-- End Progress Bar -->
</div>
<!-- End File Uploading Progress Form -->

A failed uploaded file example.

preline-ui.xls

7 KB

25%

Label at the end

Label at the end - View Code

   
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
   </div>
   <div class="w-10 text-end">
      <span class="text-sm text-gray-800 dark:text-white">25%</span>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 50%"></div>
   </div>
   <div class="w-10 text-end">
      <span class="text-sm text-gray-800 dark:text-white">50%</span>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 75%"></div>
   </div>
   <div class="w-10 text-end">
      <span class="text-sm text-gray-800 dark:text-white">75%</span>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 100%"></div>
   </div>
   <div class="w-10 text-end">
      <span class="text-sm text-gray-800 dark:text-white">100%</span>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-error text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 80%"></div>
   </div>
   <span class="sr-only">80%</span>
   <div class="w-10 text-end">
      <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-error text-white">
      <i class="ti ti-x text-xs leading-tight font-medium"></i>
      </span>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex items-center gap-x-3 whitespace-nowrap">
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
   </div>
   <span class="sr-only">100%</span>
   <div class="w-10 text-end">
      <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
      <i class="ti ti-check text-xs leading-tight font-medium"></i>
      </span>
   </div>
</div>
<!-- End Progress -->

Place label at the end of a progress.

25%

50%

75%

100%

Title label

Title label - View Code

   
<!-- Progress -->
<div>
   <div class="mb-2 flex justify-between items-center">
      <h3 class="text-sm font-semibold text-gray-800 dark:text-white">Progress title</h3>
      <span class="text-sm text-gray-800 dark:text-white">25%</span>
   </div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div>
   <div class="mb-2 flex justify-between items-center">
      <h3 class="text-sm font-semibold text-gray-800 dark:text-white">Progress title</h3>
      <span class="text-sm text-gray-800 dark:text-white">50%</span>
   </div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 50%"></div>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div>
   <div class="mb-2 flex justify-between items-center">
      <h3 class="text-sm font-semibold text-gray-800 dark:text-white">Progress title</h3>
      <span class="text-sm text-gray-800 dark:text-white">75%</span>
   </div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 75%"></div>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div>
   <div class="mb-2 flex justify-between items-center">
      <h3 class="text-sm font-semibold text-gray-800 dark:text-white">Progress title</h3>
      <span class="text-sm text-gray-800 dark:text-white">100%</span>
   </div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 100%"></div>
   </div>
</div>
<!-- End Progress -->

Place label at the end of a progress.

Progress title

25%

Progress title

50%

Progress title

75%

Progress title

100%

Floating label

Floating label - View Code

   
<!-- Progress -->
<div>
   <div class="inline-block mb-2 ms-[calc(25%-1.25rem)] py-0.5 px-1.5 bg-lightprimary border border-lightprimary text-xs font-medium text-primary rounded-md dark:bg-darkprimary dark:border-darkprimary dark:text-primary">25%</div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div>
   <div class="inline-block mb-2 ms-[calc(50%-1.25rem)] py-0.5 px-1.5 bg-lightprimary border border-lightprimary text-xs font-medium text-primary rounded-md dark:bg-darkprimary dark:border-darkprimary dark:text-primary">50%</div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 50%"></div>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div>
   <div class="inline-block mb-2 ms-[calc(75%-1.25rem)] py-0.5 px-1.5 bg-lightprimary border border-lightprimary text-xs font-medium text-primary rounded-md dark:bg-darkprimary dark:border-darkprimary dark:text-primary">75%</div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 75%"></div>
   </div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div>
   <div class="inline-block mb-2 ms-[calc(100%-1.25rem)] py-0.5 px-1.5 bg-lightprimary border border-blue-200 text-xs font-medium text-primary rounded-md dark:bg-darkprimary dark:border-darkprimary dark:text-primary">100%</div>
   <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
      <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 100%"></div>
   </div>
</div>
<!-- End Progress -->

Label floating with the number on top of the progress bar.

25%

50%

75%

100%

Color variants

Color variants - View Code

   
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-gray-800 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-white" style="width: 50%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-gray-500 text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-error text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-white text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<!-- End Progress -->

Change the appearance of individual progress bars.

Height

Height - View Code

   
<!-- Progress -->
<div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 50%"></div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-6 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 75%"></div>
</div>
<!-- End Progress -->

We only set a 'Height' value on the progress, so if you change that value the inner progress bar will automatically resize accordingly.

Label Within progress bar

Label Within progress bar - View Code

   
<!-- Progress -->
<div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap dark:bg-primary transition duration-500" style="width: 25%">25%</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap dark:bg-primary transition duration-500" style="width: 50%">50%</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap dark:bg-primary transition duration-500" style="width: 75%">75%</div>
</div>
<!-- End Progress -->
<!-- Progress -->
<div class="flex w-full h-4 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap dark:bg-primary transition duration-500" style="width: 100%">100%</div>
</div>
<!-- End Progress -->

Add labels to your progress bars by placing text within the progress bar.

25%

50%

75%

100%

Multiple bars

Multiple bars - View Code

   
<!-- Multiple bars Progress -->
<div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
   <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="flex flex-col justify-center overflow-hidden bg-secondary text-xs text-white text-center whitespace-nowrap" style="width: 15%" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="flex flex-col justify-center overflow-hidden bg-gray-800 text-xs text-white text-center whitespace-nowrap dark:bg-white" style="width: 30%" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="flex flex-col justify-center overflow-hidden bg-warning text-xs text-white text-center whitespace-nowrap" style="width: 5%" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- End Multiple bars Progress -->

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

No radius

No radius - View Code

   
<!-- Progress -->
<div class="flex w-full h-2 bg-gray-200 overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
   <div class="flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
</div>
<!-- End Progress -->

0 border radius example

Vertical progress

Vertical progress - View Code

   
<div class="flex gap-8">
   <!-- Progress Vertical -->
   <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
      <div class="rounded-full overflow-hidden bg-primary" style="height: 25%"></div>
   </div>
   <!-- End Progress Vertical -->
   <!-- Progress Vertical -->
   <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="rounded-full overflow-hidden bg-primary" style="height: 50%"></div>
   </div>
   <!-- End Progress Vertical -->
   <!-- Progress Vertical -->
   <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <div class="rounded-full overflow-hidden bg-primary" style="height: 75%"></div>
   </div>
   <!-- End Progress Vertical -->
   <!-- Progress Vertical -->
   <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
      <div class="rounded-full overflow-hidden bg-primary" style="height: 90%"></div>
   </div>
   <!-- End Progress Vertical -->
   <!-- Progress Vertical -->
   <div class="flex flex-col flex-nowrap justify-end w-2 h-32 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100">
      <div class="rounded-full overflow-hidden bg-primary" style="height: 17%"></div>
   </div>
   <!-- End Progress Vertical -->  
</div>

A base form of vertical progress.

Circular progress

Circular progress - View Code

   
<!-- Circular Progress -->
<div class="relative size-40">
   <svg class="size-full" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
      <!-- Background Circle -->
      <circle cx="18" cy="18" r="14" fill="none" class="stroke-current text-gray-200 dark:text-gray-700" stroke-width="2"></circle>
      <!-- Progress Circle inside a group with rotation -->
      <g class="origin-center -rotate-90 transform">
         <circle cx="18" cy="18" r="14" fill="none" class="stroke-current text-primary dark:text-primary" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="75"></circle>
      </g>
   </svg>
</div>
<!-- End Circular Progress -->
<!-- Circular Progress -->
<div class="relative size-40">
   <svg class="size-full" width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
      <!-- Background Circle -->
      <circle cx="18" cy="18" r="14" fill="none" class="stroke-current text-gray-200 dark:text-gray-700" stroke-width="2"></circle>
      <!-- Progress Circle inside a group with rotation -->
      <g class="origin-center -rotate-90 transform">
         <circle cx="18" cy="18" r="14" fill="none" class="stroke-current text-primary dark:text-primary" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="75"></circle>
      </g>
   </svg>
   <!-- Percentage Text -->
   <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
      <span class="text-center text-2xl font-bold text-gray-800 dark:text-white">72%</span>
   </div>
</div>
<!-- End Circular Progress -->

Circular progress.

72%

Steps

Steps - View Code

   
<!-- Step Progress -->
<div class="max-w-40 flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-gray-300 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-gray-600" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-gray-300 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-gray-600" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div>
      <div class="w-10 text-end">
         <span class="text-sm text-gray-800 dark:text-white">50%</span>
      </div>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-gray-300 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-gray-600" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-gray-300 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-gray-600" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div>
      <div class="w-10 text-end">
         <span class="text-sm text-gray-800 dark:text-white">50%</span>
      </div>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="max-w-40 flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-error text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-lighterror text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-darkerror" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-lighterror text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-darkerror" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-lighterror text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-darkerror" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div>
      <div class="w-10 text-end">
         <span class="text-sm text-error">25%</span>
      </div>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="w-full flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-error text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-lighterror text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-darkerror" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-lighterror text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-darkerror" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-lighterror text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-darkerror" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div>
      <div class="w-10 text-end">
         <span class="text-sm text-error">25%</span>
      </div>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="max-w-40 flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div>
      <div class="w-10 text-end">
         <span class="text-sm text-gray-800 dark:text-white">100%</span>
      </div>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
   <div>
      <div class="w-10 text-end">
         <span class="text-sm text-gray-800 dark:text-white">100%</span>
      </div>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="max-w-[8.5rem] flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="ms-1">
      <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
      <i class="ti ti-check text-xs relative right-[1px]"></i>
      </span>
   </div>
</div>
<!-- End Step Progress -->
<!-- Step Progress -->
<div class="flex items-center gap-x-1">
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-success text-xs text-white text-center whitespace-nowrap transition duration-500" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
   <div class="ms-1">
      <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
      <i class="ti ti-check text-xs relative right-[1px]"></i>
      </span>
   </div>
</div>
<!-- End Step Progress -->

Circular progress.

50%

25%

100%

Multiple files: Just uploaded

Multiple files: Just uploaded - View Code

   
<!-- File Uploading Progress Form -->
<div class="flex flex-col bg-white border shadow-sm rounded-md dark:bg-slate-800 dark:border-gray-700">
   <!-- Body -->
   <div class="p-4 md:p-5 space-y-7">
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.html</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 1%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.mp4</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">105.5 MB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 1%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui-cover.jpg</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">55 KB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 1%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
   </div>
   <!-- End Body -->
   <!-- Footer -->
   <div class="bg-gray-50 border-t border-gray-200 rounded-b-xl py-2 px-4 md:px-5 dark:bg-white/[.05] dark:border-gray-700">
      <div class="flex flex-wrap justify-between items-center gap-x-3">
         <div>
            <span class="text-sm font-semibold text-gray-800 dark:text-white">
            3 left
            </span>
         </div>
         <!-- End Col -->
         <div class="-me-2.5">
            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-md border border-transparent text-gray-500 hover:bg-gray-200 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
            <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
            Pause
            </button>
            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-md border border-transparent text-gray-500 hover:bg-gray-200 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
            <i class="ti ti-trash text-lg leading-tight font-medium"></i>
            Delete
            </button>
         </div>
         <!-- End Col -->
      </div>
   </div>
   <!-- End Footer -->
</div>
<!-- End File Uploading Progress Form -->

Multiple files in card style with indication of statuses.

preline-ui.html

7 KB

preline-ui.mp4

105.5 MB

preline-ui-cover.jpg

55 KB

3 left

Multiple files: In progress

Multiple files: In progress - View Code

   
<!-- File Uploading Progress Form -->
<div class="flex flex-col bg-white border shadow-sm rounded-md dark:bg-slate-800 dark:border-gray-700">
   <!-- Body -->
   <div class="p-4 md:p-5 space-y-7">
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.html</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
               <i class="ti ti-check text-xs"></i>
               </span>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.mp4</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">105.5 MB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui-cover.jpg</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">55 KB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
   </div>
   <!-- End Body -->
   <!-- Footer -->
   <div class="bg-gray-50 border-t border-gray-200 rounded-b-xl py-2 px-4 md:px-5 dark:bg-white/[.05] dark:border-gray-700">
      <div class="flex flex-wrap justify-between items-center gap-x-3">
         <div>
            <span class="text-sm font-semibold text-gray-800 dark:text-white">
            1 left
            </span>
         </div>
         <!-- End Col -->
         <div class="-me-2.5">
            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-md border border-transparent text-gray-500 hover:bg-gray-200 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
            <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
            Pause
            </button>
            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-md border border-transparent text-gray-500 hover:bg-gray-200 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
            <i class="ti ti-trash text-lg leading-tight font-medium"></i>
            Delete
            </button>
         </div>
         <!-- End Col -->
      </div>
   </div>
   <!-- End Footer -->
</div>
<!-- End File Uploading Progress Form -->

Success state.

preline-ui.html

7 KB

preline-ui.mp4

105.5 MB

preline-ui-cover.jpg

55 KB

1 left

Multiple files: Error

Multiple files: Error - View Code

   
<!-- File Uploading Progress Form -->
<div class="flex flex-col bg-white border shadow-sm rounded-md dark:bg-slate-800 dark:border-gray-700">
   <!-- Body -->
   <div class="p-4 md:p-5 space-y-7">
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.html</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">7 KB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <span class="flex-shrink-0 ms-auto size-4 flex justify-center items-center rounded-full bg-success text-white">
               <i class="ti ti-check text-xs"></i>
               </span>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui.mp4</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">105.5 MB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-primary" style="width: 25%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
      <div>
         <!-- Uploading File Content -->
         <div class="mb-2 flex justify-between items-center">
            <div class="flex items-center gap-x-3">
               <span class="size-8 flex justify-center items-center border border-gray-200 text-gray-500 rounded-md dark:border-neutral-700">
               <i class="ti ti-upload text-xl leading-tight font-medium"></i>
               </span>
               <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">preline-ui-cover.jpg</p>
                  <p class="text-xs text-gray-500 dark:text-gray-500">55 KB</p>
               </div>
            </div>
            <div class="inline-flex items-center gap-x-2">
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
               </a>
               <a class="text-gray-500 hover:text-gray-800" href="#">
               <i class="ti ti-trash text-lg leading-tight font-medium"></i>
               </a>
            </div>
         </div>
         <!-- End Uploading File Content -->
         <!-- Progress Bar -->
         <div class="flex w-full h-2 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
            <div class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 100%"></div>
         </div>
         <!-- End Progress Bar -->
      </div>
   </div>
   <!-- End Body -->
   <!-- Footer -->
   <div class="bg-gray-50 border-t border-gray-200 rounded-b-xl py-2 px-4 md:px-5 dark:bg-white/[.05] dark:border-gray-700">
      <div class="flex flex-wrap justify-between items-center gap-x-3">
         <div>
            <span class="text-sm font-semibold text-gray-800 dark:text-white">
            1 left
            </span>
         </div>
         <!-- End Col -->
         <div class="-me-2.5">
            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-md border border-transparent text-gray-500 hover:bg-gray-200 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
            <i class="ti ti-player-pause text-lg leading-tight font-medium"></i>
            Pause
            </button>
            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-md border border-transparent text-gray-500 hover:bg-gray-200 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
            <i class="ti ti-trash text-lg leading-tight font-medium"></i>
            Delete
            </button>
         </div>
         <!-- End Col -->
      </div>
   </div>
   <!-- End Footer -->
</div>
<!-- End File Uploading Progress Form -->

Error state.

preline-ui.html

7 KB

preline-ui.mp4

105.5 MB

preline-ui-cover.jpg

55 KB

2 success, 1 failed

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Notifications

Launch Admin

Meeting Today

New Payment received

Pay Bills

Go for Event

User Profile

Mathew Anderson

My Profile

My Inbox

My Tasks

Unlimited Access

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Notifications

Launch Admin

Meeting Today

New Payment received

Pay Bills

Go for Event

User Profile

Mathew Anderson

My Profile

My Inbox

My Tasks

Unlimited Access

Progress Bars

Default Progress

Default Progress - View Code

Straight bar

Straight bar - View Code

Just uploaded file

Just uploaded file - View Code

In progress file

In progress file - View Code

Completed

Completed - View Code

Error

Error - View Code

Label at the end

Label at the end - View Code

Title label

Title label - View Code

Progress title

Progress title

Progress title

Progress title

Floating label

Floating label - View Code

Color variants

Color variants - View Code

Height

Height - View Code

Label Within progress bar

Label Within progress bar - View Code

Multiple bars

Multiple bars - View Code

No radius

No radius - View Code

Vertical progress

Vertical progress - View Code

Circular progress

Circular progress - View Code

Steps

Unlimited
Access

Unlimited
Access