Progress Indeterminate

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