Color Bounce
No library Beginner
Five dots — each a different hue — bouncing vertically in a rolling wave. A colorful take on the classic typing indicator. Pure CSS, no dependencies.
Five dots — each a different hue — bouncing vertically in a rolling wave. A colorful take on the classic typing indicator. Pure CSS, no dependencies.
Goal: Create a "Color Bounce" loader animation.
Visual behavior: Five 10×10px dots arranged in a row with 6px gaps. Each dot is a distinct color: rose, orange, yellow, green, indigo. They bounce upward 12px and back in a continuous wave, with each dot delayed 120ms after the previous one. The pattern creates a colorful rolling wave effect.
Technique: Five sibling circle elements. Each gets the same translateY keyframe (0%/80%/100% → 0; 40% → -12px) with ~1.2s duration and staggered animation-delay at 120ms intervals.
Accessibility: aria-label on the wrapper. Animations 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.