Tailwind CSS Loading Components

                            <div class="space-y-6 p-4">
  <!-- Spinner with text to the right -->
  <div class="flex items-center space-x-3">
    <div class="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
    <span class="text-gray-700">Loading data, please wait...</span>
  </div>
  
  <!-- Spinner with text below -->
  <div class="flex flex-col items-center">
    <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-2"></div>
    <span class="text-gray-700">Processing your request</span>
  </div>
  
  <!-- Dots with text to the right -->
  <div class="flex items-center space-x-3">
    <div class="flex space-x-1">
      <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
      <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
      <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
    </div>
    <span class="text-gray-700">Uploading files</span>
  </div>
</div> 
                        

                            <div class="flex items-center justify-center p-4">
  <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div> 
                        

                            <div class="flex flex-col items-center justify-center space-y-8 p-4">
  <!-- Extra Small -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Extra Small</span>
    <div class="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Small -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Small</span>
    <div class="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Medium (Default) -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Medium (Default)</span>
    <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Large -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Large</span>
    <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Extra Large -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Extra Large</span>
    <div class="w-16 h-16 border-[6px] border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
</div> 
                        

                            <div class="flex items-center justify-center p-4">
  <div class="relative w-10 h-10">
    <div class="absolute top-0 left-0 right-0 bottom-0 border-4 border-gray-200 rounded-full"></div>
    <div class="absolute top-0 left-0 right-0 bottom-0 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
</div> 
                        

                            <div class="flex items-center justify-center p-4">
  <div class="relative">
    <div class="w-12 h-12 rounded-full bg-blue-500 animate-ping absolute opacity-75"></div>
    <div class="w-12 h-12 rounded-full bg-blue-500 relative"></div>
  </div>
</div> 
                        

                            <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Standard Progress Bar (Indeterminate) -->
  <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">
      <div class="bg-blue-500 h-2.5 rounded-full animate-[progress_2s_ease-in-out_infinite]" style="width: 75%; animation: indeterminate 1.5s infinite linear; background-size: 200% 100%;">
      </div>
    </div>
  </div>
  
  <!-- Progress Bar with Value (50%) -->
  <div>
    <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">50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-500 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
  </div>
  
  <!-- Progress Bar with Value (75%) -->
  <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">
      <div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div>
    </div>
  </div>
  
  <!-- Striped 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">30%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-purple-500 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>
  
  <!-- Segmented Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Multi-step Process</span>
      <span class="text-sm font-medium text-gray-500">Step 3 of 5</span>
    </div>
    <div class="flex w-full space-x-1">
      <div class="bg-blue-500 h-2.5 rounded-full flex-1"></div>
      <div class="bg-blue-500 h-2.5 rounded-full flex-1"></div>
      <div class="bg-blue-500 h-2.5 rounded-full flex-1"></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> 
                        

                            <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white rounded-lg p-8 max-w-sm w-full mx-4 flex flex-col items-center">
    <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div>
    <h3 class="text-lg font-bold text-gray-900 mb-2">Loading Page</h3>
    <p class="text-gray-600 text-center mb-4">Please wait while we load the content for you.</p>
    <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
      <div class="bg-blue-500 h-2 rounded-full w-3/4 animate-pulse"></div>
    </div>
    <p class="text-sm text-gray-500">This may take a few moments...</p>
  </div>
</div> 
                        

                            <div class="relative p-4 max-w-md mx-auto">
  <!-- Content -->
  <div class="border border-gray-200 rounded-lg p-4 bg-white">
    <h3 class="text-lg font-medium text-gray-900 mb-2">Content Panel</h3>
    <p class="text-gray-600 mb-4">This content is currently being updated with new data. Please wait while we process your request.</p>
    <div class="flex justify-end">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" disabled>Submit</button>
    </div>
  </div>
  
  <!-- Overlay -->
  <div class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded-lg">
    <div class="flex flex-col items-center">
      <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-3"></div>
      <p class="text-gray-700 font-medium">Loading content...</p>
    </div>
  </div>
</div> 
                        

                            <div class="flex items-center justify-center p-4">
  <svg class="w-12 h-12 text-blue-500 animate-spin" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M18.9 7c1.8 1.8 1.8 4.6 0 6.4-1.8 1.8-4.6 1.8-6.4 0-1.8-1.8-1.8-4.6 0-6.4 0.9-0.9 2.1-1.4 3.2-1.4s2.3 0.5 3.2 1.4z"></path>
    <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="1,3" d="M5.1 17c-1.8-1.8-1.8-4.6 0-6.4 1.8-1.8 4.6-1.8 6.4 0 1.8 1.8 1.8 4.6 0 6.4-0.9 0.9-2.1 1.4-3.2 1.4s-2.3-0.5-3.2-1.4z"></path>
  </svg>
</div> 
                        

                            <div class="flex items-center justify-center space-x-2 p-4">
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
  <div class="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
</div> 
                        

                            <div class="flex flex-wrap items-center justify-center gap-6 p-4">
  <!-- Default Blue -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Blue</span>
    <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Red -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Red</span>
    <div class="w-8 h-8 border-4 border-red-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Green -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Green</span>
    <div class="w-8 h-8 border-4 border-green-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Yellow -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Yellow</span>
    <div class="w-8 h-8 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Purple -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Purple</span>
    <div class="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div>
  </div>
  
  <!-- Gray -->
  <div class="flex flex-col items-center">
    <span class="text-sm text-gray-500 mb-2">Gray</span>
    <div class="w-8 h-8 border-4 border-gray-500 border-t-transparent rounded-full animate-spin"></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-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 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-purple-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-col items-center space-y-6 p-4">
  <!-- Primary Button with Loading -->
  <button class="flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
    <span>Loading...</span>
  </button>
  
  <!-- Secondary Button with Loading -->
  <button class="flex items-center justify-center space-x-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
    <div class="w-4 h-4 border-2 border-gray-700 border-t-transparent rounded-full animate-spin"></div>
    <span>Processing...</span>
  </button>
  
  <!-- Icon Only Button with Loading -->
  <button class="flex items-center justify-center w-10 h-10 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
  </button>
  
  <!-- Outlined Button with Loading -->
  <button class="flex items-center justify-center space-x-2 px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-md hover:bg-blue-50 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <div class="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
    <span>Submitting...</span>
  </button>
</div> 
                        

                            <div class="flex items-center justify-center space-x-1 p-4">
  <div class="w-2 h-8 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0s"></div>
  <div class="w-2 h-8 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.1s"></div>
  <div class="w-2 h-8 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
  <div class="w-2 h-8 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.3s"></div>
  <div class="w-2 h-8 bg-blue-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
</div>