Wave Bars
No library Beginner
Five vertical bars in distinct colors that scale up and down in a rippling wave sequence. Pure CSS, no dependencies.
Five vertical bars in distinct colors that scale up and down in a rippling wave sequence. Pure CSS, no dependencies.
Goal: Create a "Wave Bars" loader animation.
Visual behavior: Five vertical bars (5px wide, 32px tall, 3px border-radius) rendered side by side with a 4px gap. Each bar is a distinct color: rose, orange, yellow, green, blue. They scale vertically from 35% height to 100% and back in a continuous wave, with each bar delayed 100ms after the previous one.
Technique: A flex container holds five span elements. Each span has the same scaleY keyframe (0%/100% → scaleY(0.35); 50% → scaleY(1)), ~1s duration, ease-in-out, with animation-delay stepped at 100ms increments. transform-origin is center so bars scale symmetrically.
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.