Memphis_Food_Loader

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-neutral-900 dark:to-neutral-800 p-4 font-sans">

  <div class="relative w-48 h-48 sm:w-64 sm:h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 flex flex-col items-center justify-center p-6 bg-stone-50 dark:bg-neutral-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up">

    <!-- Memphis background elements -->
    <div class="absolute top-8 left-8 w-16 h-16 sm:w-20 sm:h-20 bg-amber-200 dark:bg-yellow-700 rounded-full opacity-60 animate-bounce-slow origin-bottom-left"></div>
    <div class="absolute bottom-10 right-10 w-24 h-24 sm:w-32 sm:h-32 bg-rose-200 dark:bg-pink-700 rounded-tl-full rounded-br-full opacity-60 animate-spin-slow"></div>
    <div class="absolute top-4 right-4 w-12 h-12 sm:w-16 sm:h-16 bg-teal-200 dark:bg-emerald-700 rounded-xl rotate-45 opacity-60 animate-pulse-slow"></div>

    <!-- Main Loader Content -->
    <div class="relative z-10 flex flex-col items-center justify-center space-y-4">
      <div class="w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 rounded-full bg-stone-300 dark:bg-neutral-600 flex items-center justify-center animate-spin-fast">
        <!-- Plate/Dish Icon -->
        <svg class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 text-stone-600 dark:text-neutral-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 10.95c0 0.58-0.08 1.15-0.25 1.7L18 22l-1.5-1.5l-3 3l-1.5-1.5l-3 3l-1.5-1.5L4 22l-4-10.35c-0.17-0.55-0.25-1.12-0.25-1.7V6C0 4.9 0.9 4 2 4h18c1.1 0 2 0.9 2 2v4.95zM2 6v4.95c0 0.28 0.02 0.55 0.05 0.82L4 18.57l1.5-1.5l3-3l1.5 1.5l3-3l1.5 1.5l3-3l1.5 1.5L20 8.87c0.03-0.27 0.05-0.54 0.05-0.82V6H2zm18 0.5H4v4.95c0 0.28 0.02 0.55 0.05 0.82L9.5 18l3-3l3 3l5.45-8.73c0.03-0.27 0.05-0.54 0.05-0.82V6.5zM7.5 10c0.83 0 1.5 0.67 1.5 1.5S8.33 13 7.5 13 6 12.33 6 11.5 6.67 10 7.5 10zM16.5 10c0.83 0 1.5 0.67 1.5 1.5S17.33 13 16.5 13 15 12.33 15 11.5 15.67 10 16.5 10z"/>
          <circle cx="7.5" cy="11.5" r="1.5" />
          <circle cx="16.5" cy="11.5" r="1.5" />
        </svg>
      </div>
      <p class="text-lg sm:text-xl md:text-2xl font-semibold text-stone-700 dark:text-neutral-200 animate-pulse">
        Craving loading...
      </p>
    </div>

    <!-- Pulsing dots (Memphis style) -->
    <div class="flex space-x-2 mt-4">
      <span class="block w-3 h-3 bg-fuchsia-300 dark:bg-purple-600 rounded-full animate-bounce-dot delay-0"></span>
      <span class="block w-3 h-3 bg-lime-300 dark:bg-green-600 rounded-full animate-bounce-dot delay-100"></span>
      <span class="block w-3 h-3 bg-sky-300 dark:bg-cyan-600 rounded-full animate-bounce-dot delay-200"></span>
    </div>

  </div>

  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-10%) scale(1.05); }
    }
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(0.98); }
    }
    @keyframes spin-fast {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes bounce-dot {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-12px); }
    }
    @keyframes fade-in-up {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .animate-bounce-slow { animation: bounce-slow 6s ease-in-out infinite; }
    .animate-spin-slow { animation: spin-slow 15s linear infinite; }
    .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
    .animate-spin-fast { animation: spin-fast 1.5s linear infinite; }
    .animate-bounce-dot { animation: bounce-dot 1.4s infinite ease-in-out; }
    .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }

    .delay-0 { animation-delay: 0s; }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
  </style>

</div>