Neon_Glow_Autumn_Loader

<div class="flex items-center justify-center min-h-screen bg-neutral-100 dark:bg-gray-900 p-4">
  <div class="max-w-md w-full bg-orange-50 dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden p-8 border border-orange-200 dark:border-gray-700 relative">
    <!-- Glow effect overlay - Bottom left -->
    <div class="absolute -left-10 -bottom-10 w-48 h-48 bg-orange-300 dark:bg-orange-800 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-1 z-0"></div>
    <!-- Glow effect overlay - Top right -->
    <div class="absolute -right-10 -top-10 w-48 h-48 bg-burgundy-300 dark:bg-burgundy-800 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-2 z-0"></div>

    <div class="relative z-10 flex flex-col items-center space-y-8">
      <div class="relative w-24 h-24">
        <!-- Outer ring with glow -->
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-slow-fast"
             style="border-top-color: #f97316; border-right-color: #f97316; filter: drop-shadow(0 0 8px #f97316) drop-shadow(0 0 15px #f97316);"></div>
        <!-- Inner ring with glow -->
        <div class="absolute inset-3 rounded-full border-4 border-transparent animate-spin-slow-fast-reverse"
             style="border-bottom-color: #b91c1c; border-left-color: #b91c1c; filter: drop-shadow(0 0 8px #b91c1c) drop-shadow(0 0 15px #b91c1c);"></div>
        <!-- Center icon placeholder -->
        <div class="flex items-center justify-center w-full h-full rounded-full bg-gradient-to-br from-orange-400 to-burgundy-600 dark:from-orange-700 dark:to-red-900 border-2 border-orange-300 dark:border-red-800">
          <svg class="w-10 h-10 text-white dark:text-gray-100 drop-shadow-[0_0_5px_rgba(255,165,0,0.8)]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="text-center space-y-3">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-900 dark:text-orange-200 tracking-tight glow-text-orange">
          Confirming Your Reservation...
        </h2>
        <p class="text-sm sm:text-base text-gray-700 dark:text-gray-400 max-w-xs mx-auto">
          Please wait a moment while we secure your booking. This may take a few seconds.
        </p>
      </div>

      <!-- Progress dots -->
      <div class="flex space-x-2">
        <div class="size-3 rounded-full bg-orange-500 dark:bg-orange-600 animate-bounce-delay-1 shadow-md glow-dot"></div>
        <div class="size-3 rounded-full bg-red-600 dark:bg-red-700 animate-bounce-delay-2 shadow-md glow-dot"></div>
        <div class="size-3 rounded-full bg-orange-500 dark:bg-orange-600 animate-bounce-delay-3 shadow-md glow-dot"></div>
      </div>

      <button type="button" class="bg-orange-600 hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-semibold py-2 px-6 rounded-lg text-sm transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative overflow-hidden group border border-orange-500 dark:border-red-900">
        <span class="absolute top-0 left-0 w-full h-full bg-orange-700 dark:bg-red-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blend-hard-light-glow"></span>
        <span class="relative z-10 glow-text-button">Cancel Booking</span>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-600 mt-4">
        Status: <span class="font-medium text-gray-600 dark:text-gray-500">Processing...</span>
      </p>
    </div>
  </div>

  <!-- Custom Tailwind CSS Keyframes & Colors -->
  <style>
    @keyframes spin-slow-fast {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-slow-fast-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes bounce-delay {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-8px); }
    }
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.1); opacity: 0.5; }
    }

    .animate-spin-slow-fast {
      animation: spin-slow-fast 1.8s linear infinite;
    }
    .animate-spin-slow-fast-reverse {
      animation: spin-slow-fast-reverse 2s linear infinite;
    }
    .animate-bounce-delay-1 {
      animation: bounce-delay 1s infinite;
    }
    .animate-bounce-delay-2 {
      animation: bounce-delay 1s infinite 0.2s;
    }
    .animate-bounce-delay-3 {
      animation: bounce-delay 1s infinite 0.4s;
    }
    .animate-pulse-slow-1 {
      animation: pulse-slow 5s infinite ease-in-out;
    }
    .animate-pulse-slow-2 {
      animation: pulse-slow 6s infinite ease-in-out 1s;
    }

    /* Custom Glow effects for text and buttons */
    .glow-text-orange {
      text-shadow: 0 0 5px rgba(255, 100, 0, 0.7), 0 0 10px rgba(255, 100, 0, 0.5);
    }
    .dark .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.9), 0 0 16px rgba(255, 165, 0, 0.6);
    }
    .glow-text-button {
      text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.5);
    }
    .glow-dot {
      filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.7));
    }
    .dark .glow-dot {
      filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.9));
    }

    /* Custom colors for Autumn theme (if not already in Tailwind config) */
    .bg-burgundy-300 { background-color: #e49a88; }
    .bg-burgundy-800 { background-color: #6a053c; }
    .bg-burgundy-600 { background-color: #8c0f4f; }
    .text-burgundy-900 { color: #4e0329; }
    .dark\:bg-red-900 { background-color: #7f1d1d; }
    .dark\:border-red-900 { border-color: #7f1d1d; }
    .dark\:text-red-900 { color: #7f1d1d; }
    .dark\:border-red-800 { border-color: #991b1b; }
    .dark\:bg-red-800 { background-color: #991b1b; }

    /* Adjust mix-blend-mode for dark theme better visual */
    .dark .mix-blend-multiply {
      mix-blend-mode: screen;
    }

  </style>
</div>