Progress

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

Example

Example progress Circle

Progress with default percent

Progress with custom text

$9,450

Edit data-percent="--" for change percent. Add .custom-after classes for add custom text on center. Edit circle bg and fill color in svg circle .stroke-indigo-.

Edit source js in src/js/demo.js functions myCircleProgress();

                      
                        <div class="flex flex-wrap flex-row">
                          <div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 mb-6">
                            <p class="text-center mb-5">Progress with default percent</p>
                            <!-- circle progress -->
                            <div class="circle-progress w-full h-40 px-3 flex justify-center items-center relative mx-auto" data-percent="83">
                              <svg class="absolute w-36 h-36" viewPort="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <circle class="stroke-indigo-100" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
                                <circle class="circle-fill stroke-indigo-400" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
                              </svg>
                            </div>
                          </div>

                          <div class="flex-shrink max-w-full px-4 w-full sm:w-1/2 mb-6">
                            <p class="text-center mb-5">Progress with custom text</p>
                            <!-- circle progress with custom text -->
                            <div class="circle-progress custom-after w-full h-40 px-3 flex justify-center items-center relative mx-auto" data-percent="43">
                              <svg class="absolute w-36 h-36" viewPort="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                <circle class="stroke-red-100" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
                                <circle class="circle-fill stroke-red-400" r="60" cx="70" cy="70" fill="transparent" stroke-dasharray="376.99" stroke-dashoffset="0"></circle>
                              </svg>
                              <span class="font-bold">$9,450</span>
                            </div>
                          </div>
                          </div>
                      
                    

Example

Example progress bar.

25%
45%
85%
95%
			                
			                  <!-- progress -->
			                  <div class="flex h-4 overflow-hidden bg-indigo-100 rounded mb-4">
			                    <div class="flex flex-col justify-center overflow-hidden text-white text-center whitespace-nowrap bg-indigo-400" 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-red-100 rounded 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-yellow-100 rounded 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-green-100 rounded 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-indigo-500 dark:bg-opacity-40 h-48 rounded mb-4">
			                        <div class="relative bg-indigo-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-red-500 dark:bg-opacity-40 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-yellow-500 dark:bg-opacity-40 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-green-500 dark:bg-opacity-40 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>