Components

Progress

A progress bar displays the status of a given process.

Example

Copied! 
        
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 25%"></div>
</div>
<!-- End Progress -->

Height

Copied! 
        
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 75%"></div>
</div>
<!-- End Progress -->

Within progress bar

Copied!
25%
50%
75%
100%
        
<div class="space-y-16">
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap dark:bg-blue-500 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-blue-600 text-xs text-white text-center whitespace-nowrap dark:bg-blue-500 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-blue-600 text-xs text-white text-center whitespace-nowrap dark:bg-blue-500 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-blue-600 text-xs text-white text-center whitespace-nowrap dark:bg-blue-500 transition duration-500" style="width: 100%">100%</div>
</div>
<!-- End Progress -->


</div>

Label at the end

Copied!
25%
50%
75%
100%
80%
100% 
        
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-red-500 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-red-500 text-white">
      <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </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-teal-500 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-teal-500 text-white">
      <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </span>
  </div>
</div>
<!-- End Progress -->

Title label

Copied!

Progress title

25%

Progress title

50%

Progress title

75%

Progress title

100% 
        
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 100%"></div>
  </div>
</div>
<!-- End Progress -->

Floating label

Copied!
25%
50%
75%
100%
        
<!-- Progress -->
<div>
  <div class="inline-block mb-2 ms-[calc(25%-1.25rem)] py-0.5 px-1.5 bg-blue-50 border border-blue-200 text-xs font-medium text-blue-600 rounded-lg dark:bg-blue-800/30 dark:border-blue-800 dark:text-blue-500">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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-50 border border-blue-200 text-xs font-medium text-blue-600 rounded-lg dark:bg-blue-800/30 dark:border-blue-800 dark:text-blue-500">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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-50 border border-blue-200 text-xs font-medium text-blue-600 rounded-lg dark:bg-blue-800/30 dark:border-blue-800 dark:text-blue-500">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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" 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-blue-50 border border-blue-200 text-xs font-medium text-blue-600 rounded-lg dark:bg-blue-800/30 dark:border-blue-800 dark:text-blue-500">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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 100%"></div>
  </div>
</div>
<!-- End Progress -->

Color variants

Copied! 
        
<!-- 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-teal-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-red-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-yellow-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-white text-xs text-white text-center whitespace-nowrap transition duration-500" style="width: 50%"></div>
</div>
<!-- End Progress -->

Multiple bars

Copied! 
        
<!-- 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-blue-400 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-blue-700 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-orange-600 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 -->

No radius

Copied! 
        
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 25%"></div>
</div>
<!-- End Progress -->

Straight bar

Copied! 
        
<!-- Progress -->
<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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-500" style="width: 25%"></div>
</div>
<!-- End Progress -->

Vertical progress

Copied! 
        
<div class="flex space-x-1" >
<!-- 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-blue-600" 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-blue-600" 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-blue-600" 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-blue-600" 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-blue-600" style="height: 17%"></div>
</div>
<!-- End Progress Vertical -->
</div>

Steps

Copied!
50%
50%
25%
25%
100%
100% 
        
<!-- 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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-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-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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-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-blue-600 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-blue-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-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="mt-5 max-w-40 flex items-center gap-x-1">
  <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-red-600 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-red-100 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" 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-red-100 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" 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-red-100 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <div>
    <div class="w-10 text-end">
      <span class="text-sm text-red-500">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-red-600 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-red-100 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" 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-red-100 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" 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-red-100 text-xs text-white text-center whitespace-nowrap transition duration-500 dark:bg-red-500/30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <div>
    <div class="w-10 text-end">
      <span class="text-sm text-red-500">25%</span>
    </div>
  </div>
</div>
<!-- End Step Progress -->

<!-- Step Progress -->
<div class="mt-5 max-w-40 flex items-center gap-x-1">
  <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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="mt-5 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 text-white">
      <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </span>
  </div>
</div>
<!-- End Step Progress -->

<!-- Step Progress -->
<div class="mt-2 flex items-center gap-x-1">
  <div class="w-full h-2.5 flex flex-col justify-center overflow-hidden bg-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 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-teal-500 text-white">
      <svg class="flex-shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
    </span>
  </div>
</div>
<!-- End Step Progress -->

Circular progress

Copied!
72% 
        
<!-- 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="16" 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="16" fill="none" class="stroke-current text-blue-600 dark:text-blue-500" 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="16" 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="16" fill="none" class="stroke-current text-blue-600 dark:text-blue-500" 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 -->

Animated progress bar with alpinejs

Copied!
0% 
        
<div class="p-8 md:p-16">



<!-- Progress -->
<div x-data="{progress: 0}" x-init="setInterval(() => progress = progress === 100 ? 0: progress + 1, 100)" 
    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-blue-600 text-xs text-white text-center whitespace-nowrap dark:bg-blue-500 transition duration-500" :style="`width: ${progress}%`" x-text="`${progress}%`">
    0%
  </div>
</div>
<!-- End Progress -->



</div>

On this page