Progress Animated

                    <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Animated 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">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-1000 ease-in-out" style="width: 45%"></div>
    </div>
  </div>
  
  <!-- Pulse Animation 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">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-purple-600 h-2.5 rounded-full animate-pulse" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Animated Striped Progress Bar -->
  <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 overflow-hidden">
      <div class="bg-green-600 h-2.5 rounded-full relative" style="width: 75%">
        <div class="absolute inset-0 bg-white opacity-20 animate-[move_2s_linear_infinite]" 
             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>
  
  <!-- Growing Progress Bar -->
  <div class="relative">
    <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"><span id="progress-value">0</span>%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div id="progress-bar" class="bg-blue-600 h-2.5 rounded-full transition-all duration-1000 ease-out" style="width: 0%"></div>
    </div>
    
    <script>
      // This is a simple animation that could be implemented with JavaScript
      // In a real application, this would update based on actual progress
      document.addEventListener('DOMContentLoaded', function() {
        const progressBar = document.getElementById('progress-bar');
        const progressValue = document.getElementById('progress-value');
        let width = 0;
        
        const interval = setInterval(function() {
          if (width >= 100) {
            clearInterval(interval);
          } else {
            width += 1;
            progressBar.style.width = width + '%';
            progressValue.textContent = width;
          }
        }, 50);
      });
    </script>
  </div>
  
  <!-- Segmented Animated Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Installation Steps</span>
      <span class="text-sm font-medium text-gray-500">3 of 5</span>
    </div>
    <div class="flex w-full space-x-1">
      <div class="bg-blue-600 h-2.5 rounded-full flex-1"></div>
      <div class="bg-blue-600 h-2.5 rounded-full flex-1"></div>
      <div class="bg-blue-600 h-2.5 rounded-full flex-1 animate-pulse"></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>