Comercio electrónico Autumn Dark Loader

<div class="flex min-h-screen items-center justify-center bg-gray-950 p-4 dark:bg-gray-50">
  <div class="w-full max-w-4xl rounded-lg bg-gray-900 p-8 shadow-xl dark:bg-zinc-100 md:p-12">
    <h2 class="mb-8 text-center font-serif text-3xl font-bold text-orange-400 dark:text-orange-700 md:text-4xl">
      Processing Your Order...
    </h2>
    <p class="mb-10 text-center text-lg text-brown-300 dark:text-brown-700">
      Please wait a moment while we prepare your items for shipment. Your patience is appreciated.
    </p>

    <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">

      <!-- Loader 1: Spinning Circle -->
      <div class="flex flex-col items-center">
        <div class="relative flex h-24 w-24 items-center justify-center rounded-full border-4 border-brown-600 dark:border-brown-300">
          <div class="h-full w-full animate-spin-slow rounded-full border-4 border-l-transparent border-t-transparent border-orange-500 dark:border-orange-600"></div>
          <div class="absolute text-lg font-semibold text-brown-400 dark:text-brown-700">Loading</div>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Confirming Details</p>
      </div>

      <!-- Loader 2: Pulsing Dots -->
      <div class="flex flex-col items-center">
        <div class="flex h-24 w-min items-end justify-center">
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-orange-600 dark:bg-orange-800" style="animation-delay: 0s;"></span>
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-brown-500 dark:bg-brown-700" style="animation-delay: 0.2s;"></span>
          <span class="m-1 h-4 w-4 animate-pulse rounded-full bg-burgundy-600 dark:bg-burgundy-800" style="animation-delay: 0.4s;"></span>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Verifying Stock</p>
      </div>

      <!-- Loader 3: Horizontal Bar Progress -->
      <div class="flex flex-col items-center">
        <div class="relative h-6 w-full max-w-sm overflow-hidden rounded-full bg-brown-700 dark:bg-brown-300">
          <div class="h-full animate-progress-bar rounded-full bg-orange-500 dark:bg-orange-600"></div>
          <div class="absolute inset-0 flex items-center justify-center text-xs font-bold text-white dark:text-gray-900">75%</div>
        </div>
        <p class="mt-4 text-center text-md text-orange-300 dark:text-orange-800">Preparing Shipment</p>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center rounded-md bg-orange-600 px-6 py-3 font-semibold text-white transition duration-300 ease-in-out hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-900 dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-zinc-100">
        <svg class="-ml-1 mr-2 h-5 w-5" 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="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 15v1m7 4h2.586a1 1 0 00.707-.293l3.414-3.414a1 1 0 000-1.414L15.414 10a1 1 0 00-1.414 0L10.586 13a1 1 0 000 1.414l3.414 3.414a1 1 0 00.707.293H19"></path></svg>
        Return to Cart
      </a>
    </div>

  </div>
</div>

<style>
  /* Custom colors for autumn theme */
  .text-brown-300 { color: #d4a77d; }
  .dark\:text-brown-700 { color: #965f3f; }
  .text-brown-400 { color: #bf8f6b; }
  .dark\:text-brown-700 { color: #965f3f; } /* Re-affirming for dark mode */
  .border-brown-600 { border-color: #a0522d; }
  .dark\:border-brown-300 { border-color: #d4a77d; }
  .bg-brown-500 { background-color: #a0522d; }
  .dark\:bg-brown-700 { background-color: #965f3f; }
  .bg-brown-700 { background-color: #6c3f1f; }
  .dark\:bg-brown-300 { background-color: #d4a77d; }
  .bg-burgundy-600 { background-color: #800020; }
  .dark\:bg-burgundy-800 { background-color: #5d0016; }
  .text-orange-300 { color: #fdbb74; }
  .dark\:text-orange-800 { color: #9a4800; }
  .text-orange-400 { color: #fb923c; }
  .dark\:text-orange-700 { color: #c2410c; }

  /* Keyframes for animations */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes progress-bar {
    0% { width: 0%; }
    100% { width: 75%; } /* Fixed at 75% for this example */
  }

  /* Tailwind utility classes for custom animations */
  .animate-spin-slow {
    animation: spin-slow 2s linear infinite;
  }
  .animate-progress-bar {
    animation: progress-bar 2s ease-out forwards; /* Plays once, stays at 75% */
  }
</style>