Equalizer Loader — Design Atlas

<div class="wrap" role="status" aria-live="polite"> <div class="eq" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span></div> <span class="cap">막대별 다른 duration + 키프레임</span> </div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:18px} .eq{display:flex;align-items:flex-end;gap:clamp(4px,1.4vmin,7px);height:clamp(30px,9vmin,52px)} .eq span{width:clamp(6px,2vmin,10px);border-radius:999px;background:var(--accent-2)} .eq span:nth-child(1){animation:e1 .8s ease-in-out infinite} .eq span:nth-child(2){animation:e2 .65s ease-in-out infinite} .eq span:nth-child(3){animation:e3 1s ease-in-out infinite} .eq span:nth-child(4){animation:e2 .75s ease-in-out infinite .1s} .eq span:nth-child(5){animation:e1 .9s ease-in-out infinite .15s} @keyframes e1{0%,100%{height:30%}45%{height:95%}70%{height:55%}} @keyframes e2{0%,100%{height:50%}30%{height:20%}60%{height:100%}} @keyframes e3{0%,100%{height:20%}50%{height:70%}80%{height:40%}} .cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

Visually the same shape as wave bars, but it reads differently — wave bars feel like one flow passing through, while an equalizer's bars look independently reactive, suggesting "several signals being processed at once." It fits naturally around audio or voice features; for a generic wait, wave bars or three dots are the safer default.

Each bar gets its own animation-duration (roughly 0.6–1.1s) and its own keyframe percentages, deliberately breaking the regularity that wave-bars relies on. Where wave bars share one duration across all bars, the equalizer's whole point is "each bar on its own rhythm."

A skeleton works better for a long wait covering most of the screen, and it's worth skipping entirely under 200ms. Give the wrapper role="status" and aria-live="polite", and hide the bars with aria-hidden="true" since they're decorative. Under prefers-reduced-motion, replace the irregular jumping with bars at a fixed height.