이퀄라이저 로더 — 디자인 아틀라스

<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}

웨이브 바와 형태는 같지만 전달하는 인상이 다릅니다 — 웨이브 바는 하나의 흐름이 지나가는 느낌인 반면, 이퀄라이저는 각 막대가 독립적으로 반응하는 것처럼 보여 "여러 신호가 동시에 처리되는 중"이라는 인상을 줍니다. 오디오·음성 관련 기능의 로딩에 자연스럽고, 그 외 일반적인 대기에는 웨이브 바나 점 세 개가 더 무난합니다.

막대마다 서로 다른 animation-duration(예: 0.6~1.1초)과 서로 다른 keyframe 퍼센트 지점을 줘서 규칙적인 웨이브 대신 불규칙한 튐을 만듭니다. 같은 duration을 공유하는 웨이브 바와 달리, 이퀄라이저는 "막대마다 다른 리듬"이 핵심이라 규칙성을 일부러 깨야 합니다.

화면 대부분을 오래 가리는 로딩이면 스켈레톤이 낫고, 200ms 이내로 끝날 대기면 생략을 고려하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 막대는 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 불규칙한 튐 대신 고정 높이 막대로 대체할 수 있습니다.