Equalizer
No library Beginner
Five bars each running an independent height animation at a different duration — the unsynchronized cadences create an organic music-equalizer feel. Pure CSS, no dependencies.
Five bars each running an independent height animation at a different duration — the unsynchronized cadences create an organic music-equalizer feel. Pure CSS, no dependencies.
Goal: Create an "Equalizer" loader animation.
Visual behavior: Five vertical bars in an indigo-to-pink gradient progression, arranged side by side with align-items:flex-end so they all rest on the same baseline. Each bar has its own unique height keyframe (short → tall → short) AND its own animation duration (ranging ~0.7s to ~1.1s). Because no two bars share a duration, they fall in and out of sync constantly, producing an organic non-repeating pattern — unlike a stagger delay approach.
Technique: Each span gets a distinct @keyframe that only animates height. Each span also gets a distinct animation-duration. The container uses display:flex and align-items:flex-end so taller bars grow upward. No animation-delay is needed — the independent durations generate the complexity.
Accessibility: aria-label on the wrapper. Under prefers-reduced-motion, animations are disabled and bars shown at a static mid height.
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.