Analytics Summary Card with Animated Loader

<div data-card="advanced-analytics"
  class="bg-neutral-900/70 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 max-w-4xl">
  <h3 class="text-xl font-medium">Advanced analytics</h3>
  <p class="mt-3 text-sm text-neutral-300">
    Adapt dashboards to your team's process with metrics, segments,
    and cohorts that match how you work.
  </p>

  <div class="bg-neutral-900/70 border-white/10 border rounded-xl mt-5 pt-4 pr-4 pb-4 pl-4">
    <div class="flex items-center justify-between">
      <div class="text-sm text-neutral-300">Earning Reports</div>
      <span class="text-xs ring-1 px-2 py-0.5 rounded-full text-amber-300 bg-amber-400/10 ring-amber-400/30">
      78%
    </span>
    </div>
    <div class="mt-2 text-2xl font-semibold tracking-tight">
      $8,214.61
    </div>
    <div
      class="overflow-hidden flex bg-neutral-900/70 h-40 border-white/10 border rounded-lg mt-3 pt-4 pr-4 pb-4 pl-4 relative items-center justify-center"
      style="background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 30%, transparent 70%);">
      <!-- Loader structure -->
      <div class="loader-main"
        style="position: relative; width: 140px; height: 140px; border-radius: 50%; overflow: hidden;">

        <!-- Outside rotating circle -->
        <div
          style="position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; border-top-color: rgba(244, 63, 94, 0.6); animation: loader-spin 2s linear infinite;">
        </div>

        <!-- Inner rotating gradient -->
        <div
          style="position: absolute; inset: 10%; border-radius: 50%; background: conic-gradient(from 90deg, rgba(244, 63, 94, 0.3), transparent); filter: blur(2px); animation: loader-spin-reverse 1.5s linear infinite;">
        </div>

        <!-- Center pulsing circle with percentage -->
        <div
          style="position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background: rgba(244, 63, 94, 0.9); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px rgba(244, 63, 94, 0.6); animation: loader-pulse 1s ease-in-out infinite; display: flex; align-items: center; justify-content: center;">
          <span style="font-size: 16px; font-weight: 600; color: white; font-family: Inter, system-ui;">78%</span>
        </div>

        <!-- Orbiting container -->
        <div
          style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: orbit-rotate 3s linear infinite;">
          <!-- 4 orbiting dots -->
          <div
            style="position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: rgba(244, 63, 94, 0.8); border-radius: 50%; transform: rotate(0deg) translate(60px); box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);">
          </div>
          <div
            style="position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: rgba(251, 113, 133, 0.8); border-radius: 50%; transform: rotate(90deg) translate(60px); box-shadow: 0 0 8px rgba(251, 113, 133, 0.6);">
          </div>
          <div
            style="position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: rgba(252, 165, 165, 0.8); border-radius: 50%; transform: rotate(180deg) translate(60px); box-shadow: 0 0 8px rgba(252, 165, 165, 0.6);">
          </div>
          <div
            style="position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: rgba(244, 63, 94, 0.8); border-radius: 50%; transform: rotate(270deg) translate(60px); box-shadow: 0 0 8px rgba(244, 63, 94, 0.6);">
          </div>
        </div>

        <!-- Additional glow effect -->
        <div
          style="position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at center, rgba(244, 63, 94, 0.2) 0%, transparent 70%); animation: loader-pulse 2s ease-in-out infinite;">
        </div>
      </div>

      <style>
        @keyframes loader-spin {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes loader-spin-reverse {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(-360deg);
          }
        }

        @keyframes loader-pulse {

          0%,
          100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
          }

          50% {
            transform: translate(-50%, -50%) scale(1.15);
            opacity: 0.9;
          }
        }

        @keyframes orbit-rotate {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }
      </style>
    </div>
  </div>
</div>