Loading With Text

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