Pulse Dots
No library Beginner
Three dots that scale and fade in a left-to-right wave. Staggered CSS keyframes, no dependencies.
LLM Prompt
Goal: Create a "Pulse Dots" loader animation.
Visual behavior: Three dots in a row, each 10×10px. Each dot scales from 0.6 to 1 and fades from 0.4 to 1 opacity in a wave pattern. The second dot starts 160ms after the first, the third starts 320ms after. Total cycle ~1.4s per dot. Stagger makes the dots appear to breathe in sequence left-to-right.
Technique: Three sibling elements styled as circles. Each gets the same keyframe animation (scale + opacity) but different animation-delay values. Keyframe: 0%/80%/100% = scale(0.6) opacity 0.4; 40% = scale(1) opacity 1.
Accessibility: role="status" and aria-label on the wrapper. Animation disabled under prefers-reduced-motion; dots shown at static opacity instead.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.