DotLoading Studio

import type { CSSProperties } from "react";

export default function DotLoader({ label = "Loading" }: { label?: string }) {
  return (
    <span role="status" aria-label={label}>
      <style>{`
.dl-scanline-f4f4f5-108-72-1400 circle {
  animation: dl-scanline-f4f4f5-108-72-1400-pulse 1400ms linear infinite;
  animation-delay: var(--dl-delay);
}
@keyframes dl-scanline-f4f4f5-108-72-1400-pulse {
  0% { opacity: 1; }
  12% { opacity: 0.64; }
  34% { opacity: 0.14; }
  82% { opacity: 0.14; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-scanline-f4f4f5-108-72-1400 circle { animation: none; }
}
      `}</style>
      <svg className="dl-scanline-f4f4f5-108-72-1400" aria-hidden="true" viewBox="0 0 100 100" width={108} height={108} fill="#F4F4F5">
        <circle cx={10} cy={10} r={7.2} opacity={1} style={{ "--dl-delay": "0ms" } as CSSProperties} />
        <circle cx={30} cy={10} r={7.2} opacity={1} style={{ "--dl-delay": "0ms" } as CSSProperties} />
        <circle cx={50} cy={10} r={7.2} opacity={1} style={{ "--dl-delay": "0ms" } as CSSProperties} />
        <circle cx={70} cy={10} r={7.2} opacity={1} style={{ "--dl-delay": "0ms" } as CSSProperties} />
        <circle cx={90} cy={10} r={7.2} opacity={1} style={{ "--dl-delay": "0ms" } as CSSProperties} />
        <circle cx={10} cy={30} r={7.2} opacity={0.14} style={{ "--dl-delay": "-1120ms" } as CSSProperties} />
        <circle cx={30} cy={30} r={7.2} opacity={0.14} style={{ "--dl-delay": "-1120ms" } as CSSProperties} />
        <circle cx={50} cy={30} r={7.2} opacity={0.14} style={{ "--dl-delay": "-1120ms" } as CSSProperties} />
        <circle cx={70} cy={30} r={7.2} opacity={0.14} style={{ "--dl-delay": "-1120ms" } as CSSProperties} />
        <circle cx={90} cy={30} r={7.2} opacity={0.14} style={{ "--dl-delay": "-1120ms" } as CSSProperties} />
        <circle cx={10} cy={50} r={7.2} opacity={0.14} style={{ "--dl-delay": "-840ms" } as CSSProperties} />
        <circle cx={30} cy={50} r={7.2} opacity={0.14} style={{ "--dl-delay": "-840ms" } as CSSProperties} />
        <circle cx={50} cy={50} r={7.2} opacity={0.14} style={{ "--dl-delay": "-840ms" } as CSSProperties} />
        <circle cx={70} cy={50} r={7.2} opacity={0.14} style={{ "--dl-delay": "-840ms" } as CSSProperties} />
        <circle cx={90} cy={50} r={7.2} opacity={0.14} style={{ "--dl-delay": "-840ms" } as CSSProperties} />
        <circle cx={10} cy={70} r={7.2} opacity={0.14} style={{ "--dl-delay": "-560ms" } as CSSProperties} />
        <circle cx={30} cy={70} r={7.2} opacity={0.14} style={{ "--dl-delay": "-560ms" } as CSSProperties} />
        <circle cx={50} cy={70} r={7.2} opacity={0.14} style={{ "--dl-delay": "-560ms" } as CSSProperties} />
        <circle cx={70} cy={70} r={7.2} opacity={0.14} style={{ "--dl-delay": "-560ms" } as CSSProperties} />
        <circle cx={90} cy={70} r={7.2} opacity={0.14} style={{ "--dl-delay": "-560ms" } as CSSProperties} />
        <circle cx={10} cy={90} r={7.2} opacity={0.458} style={{ "--dl-delay": "-280ms" } as CSSProperties} />
        <circle cx={30} cy={90} r={7.2} opacity={0.458} style={{ "--dl-delay": "-280ms" } as CSSProperties} />
        <circle cx={50} cy={90} r={7.2} opacity={0.458} style={{ "--dl-delay": "-280ms" } as CSSProperties} />
        <circle cx={70} cy={90} r={7.2} opacity={0.458} style={{ "--dl-delay": "-280ms" } as CSSProperties} />
        <circle cx={90} cy={90} r={7.2} opacity={0.458} style={{ "--dl-delay": "-280ms" } as CSSProperties} />
      </svg>
    </span>
  );
}