로더 구성 요소

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
    </div>
    <div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
    <div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
    <div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-fast {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin-reverse {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }

    .animate-pulse-fast {
      animation: pulse-fast 1.5s infinite;
    }

    .animate-bounce {
      animation: bounce 2s infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 5s linear infinite;
    }
  </style>
</div>