Loading Sizes

                    <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>