Loading Button

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