Progress

Documentation and examples for using custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Example

Example progress bar.

25%
45%
85%
95%
                
                  <!-- progress -->
                  <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 rounded-md mb-4">
                    <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-blue-700" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
                  </div>
                  <!-- progress -->
                  <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 rounded-md mb-4">
                    <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-red-700" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
                  </div>
                  <!-- progress -->
                  <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 rounded-md mb-4">
                    <div class="flex flex-col justify-center overflow-hidden text-gray-800 text-center whitespace-nowrap bg-yellow-300" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
                  </div>
                  <!-- progress -->
                  <div class="flex h-4 overflow-hidden bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 rounded-md mb-4">
                    <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-green-700" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
                  </div>

Vertical progress

Example vertical progress bar.

73%

UI/UX

53%

SEO

83%

Web

93%

Apps

                
                  <!-- vertical progress -->
                  <div class="flex flex-wrap flex-row -mx-4">
                    <!-- Vertical Progress Bar -->
                    <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                      <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 h-48 rounded mb-4">
                        <div class="relative bg-blue-700" style="height:73%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-bold">73%</span></div>
                      </div>
                      <p class="text-lg leading-normal mb-2 font-normal text-gray-800">UI/UX</p>
                    </div>

                    <!-- Vertical Progress Bar -->
                    <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                      <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 h-48 rounded mb-4">
                        <div class="relative bg-red-700" style="height:53%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-bold">53%</span></div>
                      </div>
                      <p class="text-lg leading-normal mb-2 font-normal text-gray-800">SEO</p>
                    </div>

                    <!-- Vertical Progress Bar -->
                    <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                      <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 h-48 rounded mb-4">
                        <div class="relative bg-yellow-300" style="height:83%"><span class="w-full text-gray-800 pt-2 absolute left=0 right-0 py-1 font-bold">83%</span></div>
                      </div>
                      <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Web</p>
                    </div>

                    <!-- Vertical Progress Bar -->
                    <div class="flex-shrink w-1/4 px-4 max-w-full text-center">
                      <div class="flex flex-col flex-nowrap justify-end bg-gray-200 dark:bg-gray-900 dark:bg-opacity-60 h-48 rounded mb-4">
                        <div class="relative bg-green-700" style="height:93%"><span class="w-full text-white pt-2 absolute left=0 right-0 py-1 font-bold">93%</span></div>
                      </div>
                      <p class="text-lg leading-normal mb-2 font-normal text-gray-800">Apps</p>
                    </div>
                  </div>