Componente del caricatore organico ispirato alla natura

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative flex flex-col items-center justify-center p-8 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-[1.01]">
    <!-- Background organic shapes - Desktop/Tablet -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-green-300 to-blue-400 dark:from-green-600 dark:to-blue-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob hidden md:block"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-tl from-purple-300 to-pink-400 dark:from-purple-600 dark:to-pink-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob animation-delay-2000 hidden md:block"></div>
    <div class="absolute top-1/4 -right-1/6 w-1/3 h-1/3 bg-gradient-to-tr from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 rounded-full mix-blend-multiply opacity-20 blur-xl animate-blob animation-delay-4000 hidden md:block"></div>

    <!-- Main content -->
    <div class="relative z-10 flex flex-col items-center space-y-6 md:space-y-8">
      <!-- Loader Animation -->
      <div class="relative w-24 h-24 md:w-32 md:h-32">
        <!-- Outer ring -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-transparent border-t-blue-500 dark:border-t-blue-400 animate-spin-slow" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Inner flowing path -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-b-4 border-transparent border-t-green-500 border-b-purple-500 dark:border-t-green-400 dark:border-b-purple-400 animate-spin-fast animation-delay-500" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Central logo/icon placeholder -->
        <div class="absolute inset-4 md:inset-6 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-full shadow-inner">
          <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v8"></path>
          </svg>
        </div>
      </div>

      <div class="text-center">
        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden">
          Loading Content
        </p>
        <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 max-w-xs md:max-w-md">
          Please wait while we prepare your natural and flowing experience...
        </p>
      </div>

      <!-- Progress Bar (Optional, but adds complexity) -->
      <div class="w-full max-w-xs md:max-w-sm h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 dark:from-blue-400 dark:to-green-400 rounded-full animate-progress-flow" style="width: 0%;"></div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Tailwind CSS @layer utilities for custom keyframes */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes spin-fast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
  }
  @keyframes progress-flow {
    0% { width: 0%; }
    25% { width: 40%; }
    50% { width: 70%; }
    75% { width: 90%; }
    100% { width: 100%; }
  }
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }

  .animate-spin-slow {
    animation: spin-slow 2.5s linear infinite;
  }
  .animate-spin-fast {
    animation: spin-fast 1.5s linear infinite;
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-progress-flow {
    animation: progress-flow 3s ease-out forwards;
  }
  .animate-blob {
    animation: blob 7s ease-in-out infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  .animation-delay-500 {
    animation-delay: 0.5s;
  }
</style>