Bounce Dots
No library Beginner
Three dots that bounce vertically in sequence — the classic typing-indicator pattern. Pure CSS, no dependencies.
Three dots that bounce vertically in sequence — the classic typing-indicator pattern. Pure CSS, no dependencies.
Goal: Create a "Bounce Dots" loader animation.
Visual behavior: Three dots in a row, each 10×10px. Each dot translates up 10px and back in a continuous wave. The second dot starts 150ms after the first, the third 300ms after. Looks like a "typing indicator" or conversational loading state.
Technique: Three sibling circle elements. Each gets the same keyframe animation (translateY 0 → -10px → 0) but with staggered animation-delay. Keyframe: 0%/80%/100% = translateY(0); 40% = translateY(-10px). Duration ~1.2s per cycle.
Accessibility: role="status" and aria-label on the wrapper. Animation disabled under prefers-reduced-motion.
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.