export function ConicRingLoader() {
  return (
    <div className="grid min-h-[200px] place-items-center bg-[#0B0B0F] p-16">
      <div className="text-center">
        <div className="relative mx-auto h-14 w-14">
          {/* conic gradient ring with a masked-out center */}
          <div
            className="h-full w-full rounded-full"
            style={{
              background:
                "conic-gradient(from 0deg, #6366f1, #06b6d4, #34d399, #f59e0b, #f43f5e, #6366f1)",
              animation: "conic-spin 1.1s linear infinite",
              WebkitMask:
                "radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px))",
              mask:
                "radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px))",
            }}
          />
          <span className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/90 shadow-[0_0_12px_2px_rgba(255,255,255,0.6)]" />
        </div>
        <div className="mt-5 font-mono text-[10px] uppercase tracking-[0.2em] text-[#FAFAF8]/55">
          Syncing
        </div>
      </div>

      <style>{`
        @keyframes conic-spin { to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}
Conic Ring Loader
