Tailwind CSS Progress Components

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Progress Bar with Label -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Downloading file</span>
      <span class="text-sm font-medium text-gray-500">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
    </div>
  </div>
  
  <!-- Progress Bar with Label Inside -->
  <div>
    <span class="text-sm font-medium text-gray-700">Upload progress</span>
    <div class="w-full bg-gray-200 rounded-full h-6 mt-1">
      <div class="bg-blue-600 h-6 rounded-full flex items-center justify-center text-xs font-medium text-white" style="width: 65%">65%</div>
    </div>
  </div>
  
  <!-- Progress Bar with Detailed Label -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Installation</span>
      <span class="text-sm font-medium text-blue-600">3.2 MB / 8.0 MB (40%)</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 40%"></div>
    </div>
    <span class="text-xs text-gray-500 mt-1 inline-block">Estimated time remaining: 1 minute</span>
  </div>
  
  <!-- Progress Bar with Success State -->
  <div>
    <div class="flex justify-between items-center mb-1">
      <span class="text-sm font-medium text-gray-700">Profile completion</span>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm font-medium text-green-500">Complete!</span>
      </div>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-600 h-2.5 rounded-full" style="width: 100%"></div>
    </div>
  </div>
  
  <!-- Progress Bar with Steps -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Checkout process</span>
      <span class="text-sm font-medium text-gray-500">Step 2 of 4</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
    <div class="flex justify-between mt-2">
      <span class="text-xs text-gray-500">Cart</span>
      <span class="text-xs font-medium text-blue-600">Shipping</span>
      <span class="text-xs text-gray-500">Payment</span>
      <span class="text-xs text-gray-500">Confirmation</span>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Striped Progress</span>
      <span class="text-sm font-medium text-gray-500">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full relative overflow-hidden" style="width: 45%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Success Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Success Progress</span>
      <span class="text-sm font-medium text-gray-500">75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-600 h-2.5 rounded-full relative overflow-hidden" style="width: 75%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Warning Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Warning Progress</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-yellow-500 h-2.5 rounded-full relative overflow-hidden" style="width: 60%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Danger Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Danger Progress</span>
      <span class="text-sm font-medium text-gray-500">30%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-red-600 h-2.5 rounded-full relative overflow-hidden" style="width: 30%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Large Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Large Striped</span>
      <span class="text-sm font-medium text-gray-500">50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-5">
      <div class="bg-purple-600 h-5 rounded-full relative overflow-hidden" style="width: 50%">
        <div class="absolute inset-0 bg-white opacity-20" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1.5rem 1.5rem;"></div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-12 p-4 max-w-md mx-auto">
  <!-- Basic Steps Progress -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Checkout Progress</span>
      <span class="text-sm font-medium text-gray-500">Step 2 of 4</span>
    </div>
    <div class="flex w-full space-x-1">
      <div class="bg-blue-600 h-2 rounded-full flex-1"></div>
      <div class="bg-blue-600 h-2 rounded-full flex-1"></div>
      <div class="bg-gray-200 h-2 rounded-full flex-1"></div>
      <div class="bg-gray-200 h-2 rounded-full flex-1"></div>
    </div>
    <div class="flex justify-between mt-2">
      <span class="text-xs font-medium text-blue-600">Cart</span>
      <span class="text-xs font-medium text-blue-600">Shipping</span>
      <span class="text-xs text-gray-500">Payment</span>
      <span class="text-xs text-gray-500">Confirmation</span>
    </div>
  </div>
  
  <!-- Numbered Steps Progress -->
  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium text-gray-700">Account Setup</span>
      <span class="text-sm font-medium text-gray-500">Step 2 of 3</span>
    </div>
    <div class="relative">
      <div class="w-full h-1 bg-gray-200 absolute top-4"></div>
      <div class="w-1/2 h-1 bg-blue-600 absolute top-4"></div>
      <div class="flex justify-between relative">
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
            1
          </div>
          <span class="text-xs mt-1 font-medium text-blue-600">Personal</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
            2
          </div>
          <span class="text-xs mt-1 font-medium text-blue-600">Account</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center text-sm font-medium">
            3
          </div>
          <span class="text-xs mt-1 text-gray-500">Confirmation</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Icon Steps Progress -->
  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium text-gray-700">Order Status</span>
      <span class="text-sm font-medium text-gray-500">Processing</span>
    </div>
    <div class="relative">
      <div class="w-full h-1 bg-gray-200 absolute top-4"></div>
      <div class="w-2/3 h-1 bg-green-500 absolute top-4"></div>
      <div class="flex justify-between relative">
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <span class="text-xs mt-1 font-medium text-green-500">Ordered</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <span class="text-xs mt-1 font-medium text-green-500">Processed</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center animate-pulse">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"></path>
            </svg>
          </div>
          <span class="text-xs mt-1 font-medium text-blue-500">Shipping</span>
        </div>
        <div class="flex flex-col items-center">
          <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-400 flex items-center justify-center">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
            </svg>
          </div>
          <span class="text-xs mt-1 text-gray-500">Delivered</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Steps Progress -->
  <div>
    <div class="flex justify-between mb-2">
      <span class="text-sm font-medium text-gray-700">Form Completion</span>
      <span class="text-sm font-medium text-gray-500">Step 3 of 5</span>
    </div>
    <div class="flex flex-col space-y-2 md:hidden">
      <div class="flex items-center">
        <div class="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-medium mr-2">1</div>
        <span class="text-sm font-medium text-blue-600">Basic Info</span>
      </div>
      <div class="flex items-center">
        <div class="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-medium mr-2">2</div>
        <span class="text-sm font-medium text-blue-600">Contact Details</span>
      </div>
      <div class="flex items-center">
        <div class="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-medium mr-2">3</div>
        <span class="text-sm font-medium text-blue-600">Preferences</span>
      </div>
      <div class="flex items-center">
        <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center text-xs font-medium mr-2">4</div>
        <span class="text-sm text-gray-500">Review</span>
      </div>
      <div class="flex items-center">
        <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center text-xs font-medium mr-2">5</div>
        <span class="text-sm text-gray-500">Confirmation</span>
      </div>
    </div>
    <div class="hidden md:block">
      <div class="relative">
        <div class="w-full h-1 bg-gray-200 absolute top-4"></div>
        <div class="w-1/2 h-1 bg-blue-600 absolute top-4"></div>
        <div class="flex justify-between relative">
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">1</div>
            <span class="text-xs mt-1 font-medium text-blue-600">Basic</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">2</div>
            <span class="text-xs mt-1 font-medium text-blue-600">Contact</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">3</div>
            <span class="text-xs mt-1 font-medium text-blue-600">Preferences</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center text-sm font-medium">4</div>
            <span class="text-xs mt-1 text-gray-500">Review</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center text-sm font-medium">5</div>
            <span class="text-xs mt-1 text-gray-500">Confirm</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Extra Small Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Extra Small</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-1">
      <div class="bg-blue-600 h-1 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Small Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Small</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-1.5">
      <div class="bg-blue-600 h-1.5 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Default Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Default</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Large Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Large</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-4">
      <div class="bg-blue-600 h-4 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Extra Large Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Extra Large</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-6">
      <div class="bg-blue-600 h-6 rounded-full" style="width: 60%"></div>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Default Indeterminate Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Loading...</span>
      <span class="text-sm font-medium text-gray-500">Indeterminate</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden relative">
      <div class="absolute top-0 h-2.5 bg-blue-600 rounded-full animate-pulse w-full opacity-75" style="left: -100%;"></div>
    </div>
  </div>
  
  <!-- Primary Indeterminate Progress Bar with Animation -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Processing...</span>
      <span class="text-sm font-medium text-gray-500">Indeterminate</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
      <div class="flex w-full h-2.5 animate-pulse">
        <div class="w-4/12 bg-blue-600 rounded-full mr-4"></div>
        <div class="w-3/12 bg-blue-600 rounded-full mr-4"></div>
        <div class="w-2/12 bg-blue-600 rounded-full"></div>
      </div>
    </div>
  </div>
  
  <!-- Success Indeterminate Progress Bar with Gradient -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Uploading...</span>
      <span class="text-sm font-medium text-gray-500">Indeterminate</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
      <div class="w-1/2 h-2.5 bg-gradient-to-r from-green-300 via-green-600 to-green-300 rounded-full animate-pulse"></div>
    </div>
  </div>
  
  <!-- Warning Indeterminate Progress Bar with Dots -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Connecting...</span>
      <span class="text-sm font-medium text-gray-500">Indeterminate</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden flex items-center">
      <div class="flex justify-around w-full">
        <div class="h-2 w-2 bg-yellow-500 rounded-full animate-bounce" style="animation-delay: 0ms;"></div>
        <div class="h-2 w-2 bg-yellow-500 rounded-full animate-bounce" style="animation-delay: 200ms;"></div>
        <div class="h-2 w-2 bg-yellow-500 rounded-full animate-bounce" style="animation-delay: 400ms;"></div>
        <div class="h-2 w-2 bg-yellow-500 rounded-full animate-bounce" style="animation-delay: 600ms;"></div>
        <div class="h-2 w-2 bg-yellow-500 rounded-full animate-bounce" style="animation-delay: 800ms;"></div>
      </div>
    </div>
  </div>
  
  <!-- Error Indeterminate Progress Bar with Shimmer -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Retrying...</span>
      <span class="text-sm font-medium text-gray-500">Indeterminate</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
      <div class="w-full h-2.5 bg-red-100 rounded-full relative">
        <div class="absolute inset-0 w-1/3 h-full bg-red-600 rounded-full animate-pulse"></div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-6 p-4 max-w-md mx-auto">
  <!-- Blue Progress Bar (Primary) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Primary</span>
      <span class="text-sm font-medium text-gray-500">40%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 40%"></div>
    </div>
  </div>
  
  <!-- Red Progress Bar (Danger) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Danger</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-red-600 h-2.5 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Green Progress Bar (Success) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Success</span>
      <span class="text-sm font-medium text-gray-500">80%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-600 h-2.5 rounded-full" style="width: 80%"></div>
    </div>
  </div>
  
  <!-- Yellow Progress Bar (Warning) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Warning</span>
      <span class="text-sm font-medium text-gray-500">30%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 30%"></div>
    </div>
  </div>
  
  <!-- Purple Progress Bar (Info) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Info</span>
      <span class="text-sm font-medium text-gray-500">50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-purple-600 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
  </div>
  
  <!-- Gray Progress Bar (Secondary) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Secondary</span>
      <span class="text-sm font-medium text-gray-500">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-gray-600 h-2.5 rounded-full" style="width: 45%"></div>
    </div>
  </div>
  
  <!-- Pink Progress Bar (Accent) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Accent</span>
      <span class="text-sm font-medium text-gray-500">65%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-pink-500 h-2.5 rounded-full" style="width: 65%"></div>
    </div>
  </div>
</div> 
                        

                            <div class="flex flex-wrap items-center justify-center gap-8 p-4">
  <!-- Circular Progress 25% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (25%) -->
      <circle 
        class="text-blue-600" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="188.4"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">25%</span>
    </div>
  </div>
  
  <!-- Circular Progress 50% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (50%) -->
      <circle 
        class="text-green-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="125.6"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">50%</span>
    </div>
  </div>
  
  <!-- Circular Progress 75% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (75%) -->
      <circle 
        class="text-yellow-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="62.8"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">75%</span>
    </div>
  </div>
  
  <!-- Circular Progress 100% -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <!-- Background Circle -->
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <!-- Progress Circle (100%) -->
      <circle 
        class="text-red-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="0"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">100%</span>
    </div>
  </div>
</div>

<div class="flex flex-wrap items-center justify-center gap-8 p-4 mt-8">
  <!-- Small Circular Progress -->
  <div class="relative w-16 h-16">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <circle 
        class="text-blue-600" 
        stroke-width="10" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="125.6"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-sm font-bold text-gray-700">50%</span>
    </div>
  </div>
  
  <!-- Circular Progress with Icon -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full" viewBox="0 0 100 100">
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <circle 
        class="text-green-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="0"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-8 h-8 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
      </svg>
    </div>
  </div>
  
  <!-- Circular Progress with Animation -->
  <div class="relative w-24 h-24">
    <svg class="w-full h-full animate-pulse" viewBox="0 0 100 100">
      <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
      <circle 
        class="text-purple-500" 
        stroke-width="8" 
        stroke-linecap="round" 
        stroke="currentColor" 
        fill="transparent" 
        r="40" 
        cx="50" 
        cy="50" 
        stroke-dasharray="251.2" 
        stroke-dashoffset="188.4"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-xl font-bold text-gray-700">25%</span>
    </div>
  </div>
  
  <!-- Circular Progress with Label -->
  <div class="flex flex-col items-center">
    <div class="relative w-24 h-24">
      <svg class="w-full h-full" viewBox="0 0 100 100">
        <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
        <circle 
          class="text-blue-600" 
          stroke-width="8" 
          stroke-linecap="round" 
          stroke="currentColor" 
          fill="transparent" 
          r="40" 
          cx="50" 
          cy="50" 
          stroke-dasharray="251.2" 
          stroke-dashoffset="125.6"
          transform="rotate(-90 50 50)"
        />
      </svg>
      <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-xl font-bold text-gray-700">50%</span>
      </div>
    </div>
    <span class="mt-2 text-sm font-medium text-gray-700">Downloading</span>
  </div>
</div> 
                        

                            <div class="space-y-6 p-4 max-w-md mx-auto">
  <!-- Basic Progress Bar (0%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">0%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (25%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">25%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (50%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (75%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (100%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">100%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 100%"></div>
    </div>
  </div>
</div> 
                        

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Animated Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Loading</span>
      <span class="text-sm font-medium text-gray-500">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-1000 ease-in-out" style="width: 45%"></div>
    </div>
  </div>
  
  <!-- Pulse Animation Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Processing</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-purple-600 h-2.5 rounded-full animate-pulse" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Animated Striped Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Uploading</span>
      <span class="text-sm font-medium text-gray-500">75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
      <div class="bg-green-600 h-2.5 rounded-full relative" style="width: 75%">
        <div class="absolute inset-0 bg-white opacity-20 animate-[move_2s_linear_infinite]" 
             style="background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
      </div>
    </div>
  </div>
  
  <!-- Growing Progress Bar -->
  <div class="relative">
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Downloading</span>
      <span class="text-sm font-medium text-gray-500"><span id="progress-value">0</span>%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full transition-all duration-1000 ease-out" style="width: 0%"></div>
    </div>
    
    <script>
      // This is a simple animation that could be implemented with JavaScript
      // In a real application, this would update based on actual progress
      document.addEventListener('DOMContentLoaded', function() {
        const progressBar = document.getElementById('progress-bar');
        const progressValue = document.getElementById('progress-value');
        let width = 0;
        
        const interval = setInterval(function() {
          if (width >= 100) {
            clearInterval(interval);
          } else {
            width += 1;
            progressBar.style.width = width + '%';
            progressValue.textContent = width;
          }
        }, 50);
      });
    </script>
  </div>
  
  <!-- Segmented Animated Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Installation Steps</span>
      <span class="text-sm font-medium text-gray-500">3 of 5</span>
    </div>
    <div class="flex w-full space-x-1">
      <div class="bg-blue-600 h-2.5 rounded-full flex-1"></div>
      <div class="bg-blue-600 h-2.5 rounded-full flex-1"></div>
      <div class="bg-blue-600 h-2.5 rounded-full flex-1 animate-pulse"></div>
      <div class="bg-gray-200 h-2.5 rounded-full flex-1"></div>
      <div class="bg-gray-200 h-2.5 rounded-full flex-1"></div>
    </div>
  </div>
</div>