Dots Loader

bounce x stagger

Three bouncing dots loader with staggered animation. From Syntax UI.

loaderdotsbouncesyntaxui

●●●

Code

loader-dots.tsx

export function DotsLoader() {
  return (
    <div className="flex gap-1.5">
      {["●","●","●"].map((d, i) => (
        <span key={i} className="animate-bounce text-lg text-muted-foreground"
          style={{ animationDelay: `${i * 0.15}s` }}>{d}</span>
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Dots Loader component and wire it to my accent.”