Pulse Dots Loader

<span class="pd" role="status"><i></i><i></i><i></i><span class="pd__sr">Loading</span></span>

.pd{display:inline-flex;gap:8px}
.pd i{width:12px;height:12px;border-radius:50%;background:var(--accent);animation:pd 1s ease-in-out infinite}
.pd i:nth-child(2){animation-delay:.15s}.pd i:nth-child(3){animation-delay:.3s}
.pd__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes pd{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-10px);opacity:1}}
@media (prefers-reduced-motion:reduce){.pd i{animation-duration:2.4s}}

const css = `
.pd{display:inline-flex;gap:8px}
.pd i{width:12px;height:12px;border-radius:50%;background:var(--pd-color,#1659f5);animation:pd 1s ease-in-out infinite}
.pd i:nth-child(2){animation-delay:.15s}.pd i:nth-child(3){animation-delay:.3s}
.pd__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@keyframes pd{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-10px);opacity:1}}
@media (prefers-reduced-motion:reduce){.pd i{animation-duration:2.4s}}`;

export function PulseDots({ color = "#1659f5", label = "Loading" }: { color?: string; label?: string }) {
  return (
    <>
      <style>{css}</style>
      <span className="pd" role="status" style={{ ["--pd-color" as string]: color }}>
        <i /><i /><i />
        <span className="pd__sr">{label}</span>
      </span>
    </>
  );
}

export default PulseDots;