Skeleton Animations

                    <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Basic Pulse Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Pulse Animation</p>
    <div class="skeleton h-20 w-full bg-gray-200 animate-pulse rounded"></div>
  </div>
  
  <!-- Gradient Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Gradient Animation</p>
    <div class="skeleton h-20 w-full rounded overflow-hidden">
      <div class="h-full w-full bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 animate-[shimmer_2s_infinite]"></div>
    </div>
  </div>
  
  <!-- Wave Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Wave Animation</p>
    <div class="skeleton h-20 w-full bg-gray-200 rounded relative overflow-hidden">
      <div class="absolute inset-0 -translate-x-full animate-[wave_2s_infinite] bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200"></div>
    </div>
  </div>
  
  <!-- Blink Animation -->
  <div>
    <p class="text-sm font-medium text-gray-700 mb-2">Blink Animation</p>
    <div class="skeleton h-20 w-full bg-gray-200 rounded animate-[blink_1.5s_ease-in-out_infinite]"></div>
  </div>
  
  <style>
    @keyframes shimmer {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }
    
    @keyframes wave {
      100% { transform: translateX(100%); }
    }
    
    @keyframes blink {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.8; }
    }
  </style>
</div>