Organic_Nature_Inspired_Food_Loader

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="w-full max-w-sm rounded-2xl overflow-hidden shadow-xl bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700 relative">

    <!-- Background organic shapes - visible on larger screens -->
    <div class="absolute inset-0 overflow-hidden opacity-10 dark:opacity-5">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-emerald-300 dark:bg-emerald-600 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-blob-slow animation-delay-2000"></div>
      <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-amber-200 dark:bg-amber-700 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-blob-slow"></div>
      <div class="absolute top-1/2 left-1/4 -translate-x-1/2 w-40 h-40 bg-pink-200 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-blob-slow animation-delay-4000"></div>
    </div>

    <h2 class="text-2xl sm:text-3xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6 relative z-10">
      Preparing Your Order
    </h2>

    <div class="flex flex-col items-center space-y-6 relative z-10">

      <!-- Main Loader Animation: "Leaf" or "Petal" style bounce -->
      <div class="relative flex w-24 h-24 sm:w-32 sm:h-32 justify-center items-center rounded-full bg-gradient-to-br from-emerald-100 to-emerald-300 dark:from-emerald-700 dark:to-emerald-900 shadow-inner overflow-hidden">
        <div class="w-16 h-16 sm:w-20 sm:h-20 bg-emerald-500 dark:bg-emerald-600 rounded-full animate-pulse-scale-delay opacity-90"></div>
        <svg class="absolute w-20 h-20 sm:w-24 sm:h-24 text-white dark:text-gray-200 animate-leaf-spin" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 6c-2.76 0-5 2.24-5 5S14.24 16 17 16s5-2.24 5-5-2.24-5-5-5zm-1 9c-.55 0-1-.45-1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V5c0-.55-.45-1-1-1H7C4.79 4 3 5.79 3 8c0 .87.25 1.69.7 2.4l7.9 7.9c.71.71 1.63 1.1 2.6 1.1s1.89-.39 2.6-1.1c.71-.71 1.1-1.63 1.1-2.6S17.71 16.39 17 15.69V15c-.55 0-1-.45-1-1s-.45-1-1-1c0-.55-.45-1-1-1zm-4-6.3L6.7 8.3c-.39.39-.63.92-.63 1.48C6.07 10.3 6.4 11 7 11h4c.55 0 1-.45 1-1s-.45-1-1-1z"/>
        </svg>
      </div>

      <!-- Progress Bar (simulated) -->
      <div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
        <div class="h-full bg-amber-400 dark:bg-amber-500 rounded-full animate-progress-grow origin-left"></div>
      </div>

      <!-- Status Text -->
      <p class="text-sm text-gray-600 dark:text-gray-300 animate-fade-in-shimmer animation-delay-500">
        Gathering fresh ingredients...
      </p>

    </div>

  </div>

  <!-- Tailwind JIT classes for keyframes (normally in a CSS file or via PostCSS) -->
  <style>
    @keyframes blob-slow {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30%, -20%) scale(1.1); }
      66% { transform: translate(-20%, 30%) scale(0.9); }
    }
    @keyframes pulse-scale-delay {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.15); opacity: 0.7; }
    }
    @keyframes leaf-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes progress-grow {
      0% { width: 0%; }
      100% { width: 100%; }
    }
    @keyframes fade-in-shimmer {
      0% { opacity: 0; transform: translateY(10px); filter: brightness(1); }
      50% { opacity: 1; transform: translateY(0px); filter: brightness(1.2); }
      100% { opacity: 1; transform: translateY(0px); filter: brightness(1); }
    }
    .animate-blob-slow { animation: blob-slow 15s infinite ease-in-out; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
    .animate-pulse-scale-delay { animation: pulse-scale-delay 2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
    .animate-leaf-spin { animation: leaf-spin 4s linear infinite; }
    .animate-progress-grow { animation: progress-grow 10s forwards linear; }
    .animate-fade-in-shimmer { animation: fade-in-shimmer 2s infinite ease-in-out; }
    .animation-delay-500 { animation-delay: 0.5s; }
  </style>

</div>