Industrial_Rainbow_Healthcare_Loader

<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 w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-red-500 via-yellow-500 to-indigo-500 dark:from-red-700 dark:via-yellow-700 dark:to-indigo-700 opacity-20 blur-xl"></div>
    
    <div class="relative z-10 flex flex-col items-center">
      <!-- Healthcare/Medical Icon -->
      <div class="mb-6 text-indigo-600 dark:text-indigo-400">
        <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 16H4V8h16v12zm-9-4h2v2h-2v-2zm-2-4h2v2h-2v-2zm4 0h2v2h-2v-2zm2-4h2v2h-2V8z"/>
        </svg>
      </div>

      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-4 text-center tracking-tight">
        Processing Medical Data
      </h2>
      <p class="text-base text-gray-600 dark:text-gray-300 mb-8 text-center max-w-xs sm:max-w-md">
        Please wait while we securely process your information. This may take a moment.
      </p>

      <!-- Industrial-style Loader -->
      <div class="relative w-24 h-24 mb-8">
        <div class="absolute inset-0 rounded-full border-4 border-dashed border-gray-300 dark:border-gray-600"></div>
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-slow" style="border-top-color: #ef4444; border-right-color: #f97316; border-bottom-color: #eab308; border-left-color: #22c55e;"></div>
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-fast" style="border-top-color: #3b82f6; border-left-color: #a855f7; border-bottom-color: #ec4899; border-right-color: #14b8a6;"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-300 dark:bg-gray-600 w-6 h-6 rounded-full"></div>

        <!-- Gears / Cog-like elements -->
        <div class="absolute top-0 right-0 w-8 h-8 bg-gray-400 dark:bg-gray-500 rounded-full transform rotate-45 animation-delay-200 animate-spin-fast opacity-80" style="border: 2px solid rgba(0,0,0,0.1);"></div>
        <div class="absolute bottom-0 left-0 w-6 h-6 bg-gray-400 dark:bg-gray-500 rounded-full transform rotate-90 animation-delay-400 animate-spin-slow opacity-80" style="border: 2px solid rgba(0,0,0,0.1);"></div>
      </div>

      <div class="text-sm text-gray-500 dark:text-gray-400 font-medium mb-2">
        Initiating Secure Connection...
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 overflow-hidden relative">
        <div class="absolute top-0 left-0 h-full w-0 rounded-full transition-all duration-1000 ease-in-out bg-gradient-to-r from-red-500 to-indigo-500 dark:from-red-700 dark:to-indigo-700 animate-pulse-width" style="animation-duration: 2s; animation-iteration-count: infinite;"></div>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes spin-fast {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); } /* Counter-clockwise */
  }
  @keyframes pulse-width {
    0% { width: 0%; }
    50% { width: 100%; }
    100% { width: 0%; }
  }

  .animate-spin-slow {
    animation: spin-slow 4s linear infinite;
  }
  .animate-spin-fast {
    animation: spin-fast 2s linear infinite;
  }
  .animate-pulse-width {
    animation: pulse-width 2s ease-in-out infinite;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-400 {
    animation-delay: 0.4s;
  }
</style>