15+ Tailwind Progress bar examples

Hello guys in this tutorial i have added 15+ Tailwind Progress bar Examples which are available on Codepen and other resources.

Best Collection of Tailwind Progress bar examples

#01 Default progress bar

Default progress bar, which was developed by flowbite. Moreover, you can customize it according to your wish and need.

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>

#02 Tailwind Progress bars component

Tailwind Progress bars component, which was developed by tailwind-elements. Moreover, you can customize it according to your wish and need.

<div class="w-full bg-gray-200 h-1 mb-6">
  <div class="bg-blue-600 h-1" style="width: 0%"></div>
</div>
<div class="w-full bg-gray-200 h-1 mb-6">
  <div class="bg-blue-600 h-1" style="width: 25%"></div>
</div>
<div class="w-full bg-gray-200 h-1 mb-6">
  <div class="bg-blue-600 h-1" style="width: 50%"></div>
</div>
<div class="w-full bg-gray-200 h-1 mb-6">
  <div class="bg-blue-600 h-1" style="width: 75%"></div>
</div>
<div class="w-full bg-gray-200 h-1">
  <div class="bg-blue-600 h-1" style="width: 100%"></div>
</div>

#03 Multicolor CSS Progress bar

Multicolor CSS Progress bar, which was developed by tailwindcomponents. Moreover, you can customize it according to your wish and need.

<div class="relative pt-1 mx-5">
  <div class="overflow-hidden h-4 mb-4 text-xs flex rounded bg-emerald-200">
    <div style="width: 10%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"></div>
    <div style="width: 15%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
    <div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"></div>
  </div>
</div>

#04 Progress Bar With Steps

Progress Bar With Steps, which was developed by tailwinduikit. Moreover, you can customize it according to your wish and need.

                    <div class="w-11/12 lg:w-2/6 mx-auto">
                        <div class="bg-gray-200 dark:bg-gray-700 h-1 flex items-center justify-between">
                            <div class="w-1/3 bg-indigo-700 h-1 flex items-center">
                                <div class="bg-indigo-700 h-6 w-6 rounded-full shadow flex items-center justify-center">
                                    <img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/thin_with_steps-svg1.svg" alt="check"/>
                                </div>
                            </div>
                            <div class="w-1/3 flex justify-between bg-indigo-700 h-1 items-center relative">
                                <div class="absolute right-0 -mr-2">
                                    <div class="relative bg-white dark:bg-gray-800 shadow-lg px-2 py-1 rounded mt-16 -mr-12">
                                        <svg class="absolute top-0 -mt-1 w-full right-0 left-0 text-white dark:text-gray-800" width="16px" height="8px" viewBox="0 0 16 8" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <g id="Progress-Bars" transform="translate(-322.000000, -198.000000)" fill="currentColor">
                                                    <g id="Group-4" transform="translate(310.000000, 198.000000)">
                                                        <polygon id="Triangle" points="20 0 28 8 12 8"></polygon>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                        <p tabindex="0" class="focus:outline-none text-indigo-700 dark:text-indigo-400 text-xs font-bold">Step 3: Analyzing</p>
                                    </div>
                                </div>
                                <div class="bg-indigo-700 h-6 w-6 rounded-full shadow flex items-center justify-center -ml-2">
                                    <img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/thin_with_steps-svg1.svg" alt="check"/>
                                </div>
                                <div class="bg-white dark:bg-gray-700 h-6 w-6 rounded-full shadow flex items-center justify-center -mr-3 relative">
                                    <div class="h-3 w-3 bg-indigo-700 rounded-full"></div>
                                </div>
                            </div>
                            <div class="w-1/3 flex justify-end">
                                <div class="bg-white dark:bg-gray-700 h-6 w-6 rounded-full shadow"></div>
                            </div>
                        </div>
                    </div>
                

#05 Tailwind CSS Progress Bar With Label Chip

Tailwind CSS Progress Bar With Label Chip, which was developed by postsrc. Moreover, you can customize it according to your wish and need.

<div class="bg-white p-8 shadow-lg shadow-slate-200 rounded-lg w-full md:w-2/3 lg:w-1/3">
  <div class="flex items-center justify-between">
	<span class="text-slate-400 text-sm text-slate-500">Progress 1</span>
	<span class="px-2 py-1 bg-teal-50 rounded-lg text-xs text-teal-400 font-medium min-w-[46px] text-center">0%</span>
  </div>

  <div class="w-full bg-slate-100 h-1 mb-6 mt-2">
	<div class="bg-teal-400 h-1 rounded" style="width: 0%"></div>
  </div>

  <div class="flex items-center justify-between">
	<span class="text-slate-400 text-sm text-slate-500">Progress 2</span>
	<span class="px-2 py-1 bg-teal-50 rounded-lg text-xs text-teal-400 font-medium min-w-[46px] text-center">25%</span>
  </div>

  <div class="w-full bg-slate-100 h-1 mb-6 mt-2">
	<div class="bg-teal-400 h-1 rounded" style="width: 25%"></div>
  </div>

  <div class="flex items-center justify-between">
	<span class="text-slate-400 text-sm text-slate-500">Progress 3</span>
	<span class="px-2 py-1 bg-teal-50 rounded-lg text-xs text-teal-400 font-medium min-w-[46px] text-center">50%</span>
  </div>

  <div class="w-full bg-slate-100 h-1 mb-6 mt-2">
	<div class="bg-teal-400 h-1 rounded" style="width: 50%"></div>
  </div>

  <div class="flex items-center justify-between">
	<span class="text-slate-400 text-sm text-slate-500">Progress 4</span>
	<span class="px-2 py-1 bg-teal-50 rounded-lg text-xs text-teal-400 font-medium min-w-[46px] text-center">75%</span>
  </div>

  <div class="w-full bg-slate-100 h-1 mb-6 mt-2">
	<div class="bg-teal-400 h-1 rounded" style="width: 75%"></div>
  </div>

  <div class="flex items-center justify-between">
	<span class="text-slate-400 text-sm text-slate-500">Progress 5</span>
	<span class="px-2 py-1 bg-teal-50 rounded-lg text-xs text-teal-400 font-medium min-w-[46px] text-center">100%</span>
  </div>

  <div class="w-full bg-slate-100 h-1 mt-2">
	<div class="bg-teal-400 h-1 rounded" style="width: 100%"></div>
  </div>
</div>

#06 Multiple CSS Progress Bars

Multiple CSS Progress Bars, which was developed by tailwindcomponents. Moreover, you can customize it according to your wish and need.

<div class="w-full">
  <div class="shadow w-full bg-grey-light">
    <div class="bg-blue text-xs leading-none py-1 text-center text-white" style="width: 45%">45%</div>
  </div>
  <div class="shadow w-full bg-grey-light mt-2">
    <div class="bg-teal text-xs leading-none py-1 text-center text-white" style="width: 55%">55%</div>
  </div>
  <div class="shadow w-full bg-grey-light mt-2">
    <div class="bg-orange text-xs leading-none py-1 text-center text-white" style="width: 65%">65%</div>
  </div>  
  <div class="shadow w-full bg-grey-light mt-2">
    <div class="bg-red text-xs leading-none py-1 text-center text-white" style="width: 75%">75%</div>
  </div>
<div>

#07 Progress Bar With Tooltip

Progress Bar With Tooltip, which was developed by tailgrids. Moreover, you can customize it according to your wish and need.

<div class="w-full lg:w-5/12 px-4">
   <div class="mb-12">
      <div class="w-full h-[10px] relative bg-light rounded-2xl">
         <div class="
            absolute
            top-0
            left-0
            bg-primary
            rounded-2xl
            h-full
            w-1/2
            ">
            <span class="
               bg-primary
               text-white
               rounded-sm
               font-semibold
               text-xs
               py-1
               px-2
               absolute
               -right-4
               bottom-full
               mb-2
               ">
            <span class="
               w-2
               h-2
               rotate-45
               bg-primary
               absolute
               -z-10
               bottom-[-2px]
               left-1/2
               -translate-x-1/2
               rounded-sm
               "></span>
            50%
            </span>
         </div>
      </div>
   </div>
   <div class="mb-12">
      <div class="w-full h-[10px] relative bg-light rounded-2xl">
         <div class="
            absolute
            top-0
            left-0
            bg-primary
            rounded-2xl
            h-full
            w-[75%]
            ">
            <span class="
               bg-primary
               text-white
               rounded-sm
               font-semibold
               text-xs
               py-1
               px-2
               absolute
               -right-4
               bottom-full
               mb-2
               ">
            <span class="
               w-2
               h-2
               rotate-45
               bg-primary
               absolute
               -z-10
               bottom-[-2px]
               left-1/2
               -translate-x-1/2
               rounded-sm
               "></span>
            75%
            </span>
         </div>
      </div>
   </div>
   <div class="mb-12">
      <div class="w-full h-[10px] relative bg-light rounded-2xl">
         <div class="
            absolute
            top-0
            left-0
            bg-primary
            rounded-2xl
            h-full
            w-[90%]
            ">
            <span class="
               bg-primary
               text-white
               rounded-sm
               font-semibold
               text-xs
               py-1
               px-2
               absolute
               -right-4
               bottom-full
               mb-2
               ">
            <span class="
               w-2
               h-2
               rotate-45
               bg-primary
               absolute
               -z-10
               bottom-[-2px]
               left-1/2
               -translate-x-1/2
               rounded-sm
               "></span>
            90%
            </span>
         </div>
      </div>
   </div>
</div>

#08 Progress steps bar

Progress steps bar, which was developed by tailwindcomponents. Moreover, you can customize it according to your wish and need.

<div class="max-w-xl mx-auto my-4 border-b-2 pb-4">	
  <div class="flex pb-3">
    <div class="flex-1">
    </div>
    <div class="flex-1">
      <div class="w-10 h-10 bg-green mx-auto rounded-full text-lg text-white flex items-center">
        <span class="text-white text-center w-full">
          <i class="fa fa-check w-full fill-current white">
          </i>
        </span>
      </div>
    </div>
    <div class="w-1/6 align-center items-center align-middle content-center flex">
      <div class="w-full bg-grey-light rounded items-center align-middle align-center flex-1">
        <div class="bg-green-light text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 100%">
        </div>
      </div>
    </div>
    <div class="flex-1">
      <div class="w-10 h-10 bg-green mx-auto rounded-full text-lg text-white flex items-center">
        <span class="text-white text-center w-full">
          <i class="fa fa-check w-full fill-current white">
          </i>
        </span>
      </div>
    </div>
    <div class="w-1/6 align-center items-center align-middle content-center flex">
      <div class="w-full bg-grey-light rounded items-center align-middle align-center flex-1">
        <div class="bg-green-light text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 20%">
        </div>
      </div>
    </div>
    <div class="flex-1">
      <div class="w-10 h-10 bg-white border-2 border-grey-light mx-auto rounded-full text-lg text-white flex items-center">
        <span class="text-grey-darker text-center w-full">3
        </span>
      </div>
    </div>
    <div class="w-1/6 align-center items-center align-middle content-center flex">
      <div class="w-full bg-grey-light rounded items-center align-middle align-center flex-1">
        <div class="bg-green-light text-xs leading-none py-1 text-center text-grey-darkest rounded " style="width: 0%">
        </div>
      </div>
    </div>
    <div class="flex-1">
      <div class="w-10 h-10 bg-white border-2 border-grey-light mx-auto rounded-full text-lg text-white flex items-center">
        <span class="text-grey-darker text-center w-full">4
        </span>
      </div>
    </div>
    <div class="flex-1">
    </div>		
  </div>
  <div class="flex text-xs content-center text-center">
    <div class="w-1/4">
      Invitation received
    </div>
    <div class="w-1/4">
      Personal details
    </div>
    <div class="w-1/4">
      Application details
    </div>
    <div class="w-1/4">
      Confirmation
    </div>			
  </div>
</div>

15+ Tailwind Search Bar Examples

Hello guys in this tutorial i have added 15+ Tailwind Search Bar Examples which are available on Codepen and other resources.

Learn more

#09 Tailwind CSS radial progress bar

Tailwind CSS radial progress bar, which was developed by tailwindcomponents. Moreover, you can customize it according to your wish and need.

<!-- component -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
<div class="min-h-screen py-20 px-10 bg-gray-100">
  <div class="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-10">
    <div class="flex items-center flex-wrap max-w-md px-10 bg-white shadow-xl rounded-2xl h-20"
       x-data="{ circumference: 50 * 2 * Math.PI, percent: 80 }"
       >
          <div class="flex items-center justify-center -m-6 overflow-hidden bg-white rounded-full">
            <svg class="w-32 h-32 transform translate-x-1 translate-y-1" x-cloak aria-hidden="true">
              <circle
                class="text-gray-300"
                stroke-width="10"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
                />
              <circle
                class="text-blue-600"
                stroke-width="10"
                :stroke-dasharray="circumference"
                :stroke-dashoffset="circumference - percent / 100 * circumference"
                stroke-linecap="round"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
               />
            </svg>
            <span class="absolute text-2xl text-blue-700" x-text="`${percent}%`"></span>
          </div>
          <p class="ml-10 font-medium text-gray-600 sm:text-xl">Performance</p>

          <span class="ml-auto text-xl font-medium text-blue-600 hidden sm:block">+25%</span>
      </div>
    
    
    <div class="flex items-center flex-wrap max-w-md px-10 bg-white shadow-xl rounded-2xl h-20"
       x-data="{ circumference: 50 * 2 * Math.PI, percent: 90 }"
       >
          <div class="flex items-center justify-center -m-6 overflow-hidden bg-white rounded-full">
            <svg class="w-32 h-32 transform translate-x-1 translate-y-1" x-cloak aria-hidden="true">
              <circle
                class="text-gray-300"
                stroke-width="10"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
                />
              <circle
                class="text-red-600"
                stroke-width="10"
                :stroke-dasharray="circumference"
                :stroke-dashoffset="circumference - percent / 100 * circumference"
                stroke-linecap="round"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
               />
            </svg>
            <span class="absolute text-2xl text-red-700" x-text="`${percent}%`"></span>
          </div>
          <p class="ml-10 font-medium text-gray-600 sm:text-xl">Storage</p>

          <span class="ml-auto text-xl font-medium text-red-600 hidden sm:block">20GB</span>
      </div>
  </div>
</div>


<div class="fixed bottom-5 right-5 flex items-center space-x-4">
  <a href="https://twitter.com/ak_kamona" target="_blank" class="transition-transform transform hover:scale-125">
    <span class="sr-only">Twitter</span>
      <svg
         aria-hidden="true"
         class="w-8 h-8 text-blue-500"
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
            >
      <path d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"
            ></path>
    </svg>
  </a>
  <a href="https://github.com/Kamona-WD" target="_blank" class="transition-transform transform hover:scale-125">
    <span class="sr-only">Github</span>
      <svg
         aria-hidden="true"
         class="w-8 h-8 text-black"
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         >
        <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z"
              ></path>
    </svg>
  </a>
</div>

#10 Circular Progress Bar

Circular Progress Bar, which was developed by Kamona-WD. Moreover, you can customize it according to your wish and need.

<!-- component -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.2.2/cdn.js" defer></script>

<style>
    .container {
        height: 400vh;
    }
</style>

<div class="container">
    <!-- Top bar -->
    <div x-data="scrollProgress" class="fixed inset-x-0 top-0 z-50">
        <div class="h-1 bg-blue-500" :style="`width: ${percent}%`"></div>
    </div>

    <main class="w-scrren min-h-screen flex items-center justify-center">
      <h1 class="text-3xl font-medium">Scroll down</h1>
    </main>

    <!-- Circle -->
    <div
      x-data="scrollProgress"
      class="fixed inline-flex items-center justify-center overflow-hidden rounded-full bottom-5 left-5"
    >
      <!-- Building a Progress Ring: https://css-tricks.com/building-progress-ring-quickly/ -->
      <svg class="w-20 h-20">
        <circle
          class="text-gray-300"
          stroke-width="5"
          stroke="currentColor"
          fill="transparent"
          r="30"
          cx="40"
          cy="40"
        />
        <circle
          class="text-blue-600"
          stroke-width="5"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="circumference - percent / 100 * circumference"
          stroke-linecap="round"
          stroke="currentColor"
          fill="transparent"
          r="30"
          cx="40"
          cy="40"
        />
      </svg>
      <span class="absolute text-xl text-blue-700" x-text="`${percent}%`"></span>
    </div>

    <!-- Social links -->
    <div class="fixed flex flex-col items-center space-y-4 bottom-5 right-5">
      <a href="https://twitter.com/ak_kamona" target="_blank" class="transition-transform transform hover:scale-125">
        <span class="sr-only">Twitter</span>
        <svg
          aria-hidden="true"
          class="w-8 h-8 text-blue-500"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"
          ></path>
        </svg>
      </a>
      <a href="https://github.com/Kamona-WD" target="_blank" class="transition-transform transform hover:scale-125">
        <span class="sr-only">Github</span>
        <svg
          aria-hidden="true"
          class="w-8 h-8 text-black"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z"
          ></path>
        </svg>
      </a>
    </div>
</div>

<script>
    const scrollProgress = () => {
        return {
            init() {
                window.addEventListener('scroll', () => {
                    let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
                    this.percent = Math.round((winScroll / height) * 100)
                })
            },
            circumference: 30 * 2 * Math.PI,
            percent: 0,
        }
    }
</script>

#11 Gradient Progress Bars

Gradient Progress Bars, which was developed by larainfo. Moreover, you can customize it according to your wish and need.

<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-1/4 h-full bg-gradient-to-br from-gray-500 to-gray-800 "></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-2/4 h-full bg-gradient-to-br from-green-500 to-green-800"></div>
</div>
<div class="relative h-4">
    <div class="absolute w-full h-full bg-gray-200"></div>
    <div class="absolute w-3/4 h-full bg-gradient-to-br from-red-500 to-red-800"></div>
</div>

#12 Tailwind Progress Bar Shimmer Animation

Progress Bar With Shimmer Animation, which was developed by Andre Prilly Kurniawan. Moreover, you can customize it according to your wish and need.

<div class="p-10 flex flex-col space-y-3">
  <div class="relative w-full sm:w-1/2 bg-gray-200 rounded">
    <div style="width: 60%" class="absolute top-0 h-4 rounded shim-green"></div>
  </div>

  <div class="relative w-full sm:w-1/2 bg-gray-200 rounded">
    <div style="width: 80%" class="absolute top-0 h-4 rounded shim-blue"></div>
  </div>

  <div class="relative w-full sm:w-1/2 bg-gray-200 rounded">
    <div style="width: 100%" class="absolute top-0 h-4 rounded shim-red"></div>
  </div>
</div>
<style>
.shim-green {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 255, 0, 0.7);
}
.shim-green::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(233, 233, 233, 1) 0,
    rgba(233, 233, 233, 0.9) 50%,
    rgba(233, 233, 233, 0.8) 100%
  );
  animation: shimmer 2s ease-out infinite;
  content: "";
}

.shim-blue {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 155, 255, 0.7);
}
.shim-blue::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(233, 233, 233, 1) 0,
    rgba(233, 233, 233, 0.9) 50%,
    rgba(233, 233, 233, 0.8) 100%
  );
  animation: shimmer 2.5s ease-out infinite;
  content: "";
}

.shim-red {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 0, 0, 0.7);
}
.shim-red::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(233, 233, 233, 1) 0,
    rgba(233, 233, 233, 0.9) 50%,
    rgba(233, 233, 233, 0.8) 100%
  );
  animation: shimmer 3s ease-out infinite;
  content: "";
}

@keyframes shimmer {
  100% {
    transform: translateX(0%);
    opacity: 0;
  }
}
</style>

#13 CSS Progress Bar with label inside

CSS Progress Bar with label inside, which was developed by Rahul. Moreover, you can customize it according to your wish and need.

<div style="width:600px; margin: 100px auto;">
  <div class="w-full bg-gray-300 dark:bg-gray-700">
    <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none" style="width: 60%"> 60%</div>
  </div>
</div>

#14 Vertical progress bar

Vertical progress bar, which was developed by preline. Moreover, you can customize it according to your wish and need.

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

#15 Animated Circular Progress Bar

Animated Circular Progress Bar, which was developed by Hafiz_Dev. Moreover, you can customize it according to your wish and need.

<!-- component -->
<script defer src="https://unpkg.com/alpinejs@3.2.4/dist/cdn.min.js"></script>    
    
<main class="grid w-full min-h-screen text-gray-100 bg-gray-900 place-content-center">

    <section x-data="skillDisplay"
        class="p-6 space-y-6 bg-gray-800 rounded-xl md:grid md:grid-cols-2 md:gap-4 sm:space-y-0">
        <div class="grid grid-cols-2 gap-6">
            <template x-for="skill in skills">
                <button x-text="skill.title"
                    class="px-4 py-2 text-xl text-gray-100 transition bg-blue-600 rounded-md h-14 w-44 hover:bg-blue-700"
                    :class="(currentSkill.title == skill.title) && 'font-bold ring-2 ring-gray-100'"
                    @click="currentSkill = skill"></button>
            </template>
        </div>

        <div class="flex items-center justify-center" x-data="{ circumference: 2 * 22 / 7 * 120 }">
            <svg class="transform -rotate-90 w-72 h-72">
                <circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
                    class="text-gray-700" />

                <circle cx="145" cy="145" r="120" stroke="currentColor" stroke-width="30" fill="transparent"
                    :stroke-dasharray="circumference"
                    :stroke-dashoffset="circumference - currentSkill.percent / 100 * circumference"
                    class="text-blue-500 " />
            </svg>
            <span class="absolute text-5xl" x-text="`${currentSkill.percent}%`"></span>
    </section>
</main>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('skillDisplay', () => ({
            skills: [{
                    'title': 'HTML',
                    'percent': '95',
                },
                {
                    'title': 'CSS',
                    'percent': '70',
                },
                {
                    'title': 'Tailwind CSS',
                    'percent': '90',
                },
                {
                    'title': 'JavaScript',
                    'percent': '70',
                },
                {
                    'title': 'Alpine JS',
                    'percent': '80',
                }, {
                    'title': 'PHP',
                    'percent': '65',
                }, {
                    'title': 'Laravel',
                    'percent': '75',
                }
            ],
            currentSkill: {
                'title': 'HTML',
                'percent': '95',
            }
        }));
    });
</script>

#16 Task Widget with Progress bar

Task Widget with Progress bar, which was developed by Asad Ali Haider. Moreover, you can customize it according to your wish and need.

<!-- component -->
<!-- follow me on twitter @asad_codes -->
<div class="flex flex-wrap place-items-center h-screen">
    <!-- card -->
    <div class="shadow-lg rounded-xl w-72 md:w-96 p-4 bg-white relative overflow-hidden">
        <a href="#" class="w-full h-full block">
            <div class="flex items-center border-b-2 mb-2 py-2">
                <img class='w-10 h-10 object-cover rounded-full' alt='User avatar' src='https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200'>

                <div class="pl-3">
                    <div class="font-medium">
                        Jessica White
                    </div>
                    <div class="text-gray-600 text-sm">
                        Sr. Forntend Developer
                    </div>
                </div>
            </div>
            <div class="w-full">
                <p class="text-gray-800 text-sm font-medium mb-2">
                    Working On:
                </p>
                <p class="text-gray-800 text-xl font-medium mb-2">
                    Improve css design of the carousel
                </p>
                <p class="text-blue-600 text-xs font-medium mb-2">
                    Due: Sunday, 23 August
                </p>
                <p class="text-gray-400 text-sm mb-4">
                    You’ve been coding for a while now and know your way around...
                </p>
            </div>
            <div class="flex items-center justify-between my-2">
                <p class="text-gray-300 text-sm">
                    4/6 task completed
                </p>
            </div>
            <div class="w-full h-2 bg-blue-200 rounded-full">
                <div class="w-2/3 h-full text-center text-xs text-white bg-blue-600 rounded-full">
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Does this resource worth a follow? -->
<div class="flex items-end justify-end fixed bottom-0 right-0 mb-4 mr-4 z-10">
    <div>
        <a title="Follow me on twitter" href="https://www.twitter.com/asad_codes" target="_blank" class="block w-16 h-16 rounded-full transition-all shadow hover:shadow-lg transform hover:scale-110 hover:rotate-12">
            <img class="object-cover object-center w-full h-full rounded-full" src="https://www.imore.com/sites/imore.com/files/styles/large/public/field/image/2019/12/twitter-logo.jpg"/>
        </a>
    </div>
</div>