Glassmorphism ローダー コンポーネント

<div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>