네온글로우웨더로더

<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
  <div class="relative flex flex-col items-center justify-center w-56 h-56 sm:w-64 sm:h-64 md:w-80 md:h-80 rounded-full bg-gray-800 dark:bg-gray-950 shadow-lg glow-border animate-pulse-border">
    <div class="relative w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 rounded-full flex items-center justify-center bg-gray-700 dark:bg-gray-900 overflow-hidden">
      <!-- Inner Glow Effect -->
      <div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-slow" style="background: conic-gradient(from 0deg, transparent 0%, transparent 25%, #00FFFF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>

      <div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-reverse-slow" style="background: conic-gradient(from 180deg, transparent 0%, transparent 25%, #FF00FF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>

      <!-- Main Weather Icon/Text Container -->
      <div class="relative z-10 text-white dark:text-gray-200 text-6xl md:text-7xl font-bold flex flex-col items-center justify-center leading-none animate-pulse-text">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 text-cyan-400 dark:text-fuchsia-400 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <filter id="glow">
              <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 00-.104-10L20 9l-2.071-2.071A5 5 0 0013.818 3H10a4 4 0 00-4 4v2.586M3 15V9m0 6a2 2 0 002 2h3.28m7.295-8.586A8.995 8.995 0 0018 9v2.586M21 12H9" filter="url(#glow)"></path>
        </svg>
        <span class="mt-2 text-2xl sm:text-3xl font-light text-cyan-300 dark:text-fuchsia-300 drop-shadow-md">Loading...</span>
      </div>
    </div>
    <p class="mt-6 text-gray-400 dark:text-gray-500 text-sm sm:text-base tracking-wide animate-fade-in">Fetching climate data</p>
  </div>
</div>

<style>
  @keyframes pulse-border {
    0% {
      box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
    }
    50% {
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.8);
    }
    100% {
      box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
    }
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  @keyframes pulse-text {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.05);
    }
  }

  @keyframes fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  .animate-spin-reverse-slow {
    animation: spin-reverse-slow 10s linear infinite;
  }

  .animate-pulse-text {
    animation: pulse-text 2s ease-in-out infinite;
  }

  .animate-fade-in {
    animation: fade-in 1s ease-out forwards;
    animation-delay: 0.5s; /* Delay for better visual flow */
    opacity: 0; /* Start hidden */
  }

  /* Dark mode specific glow colors */
  @media (prefers-color-scheme: dark) {
    .glow-border {
      box-shadow: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(255, 0, 255, 0.5);
    }
    /* The background of the glow uses inline style for conic-gradient, so it will not directly apply to the dark mode via this class. 
       However, the accent colors for text and SVG are handled by Tailwind's dark: prefix. */
  }
</style>