통통 튀는 점 — 디자인 아틀라스

<div class="wrap" role="status" aria-live="polite"> <div class="dots" aria-hidden="true"><span></span><span></span><span></span></div> <span class="cap">translateY 바운스 + 스태거</span> </div>

.wrap{display:flex;flex-direction:column;align-items:center;gap:18px} .dots{display:flex;gap:clamp(7px,2.4vmin,14px);height:clamp(20px,6vmin,34px);align-items:flex-end} .dots span{width:clamp(9px,3vmin,16px);height:clamp(9px,3vmin,16px);border-radius:50%;background:var(--accent-2);animation:bd .9s cubic-bezier(.5,0,.5,1.6) infinite} .dots span:nth-child(2){animation-delay:.15s;background:var(--accent)} .dots span:nth-child(3){animation-delay:.3s;background:var(--accent-3)} @keyframes bd{0%,100%{transform:translateY(0)}40%{transform:translateY(-90%)}} .cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

점 세 개 로더와 목적은 같지만(짧고 비확정적인 대기), 밝기 대신 위치가 움직이므로 더 활기차고 눈에 띄는 인상을 줍니다. 게임·메신저처럼 톤이 가벼운 제품에 어울리고, 격식 있는 대시보드나 결제 흐름처럼 진지한 맥락에는 과할 수 있습니다.

translateY를 0과 음수 값 사이로 왕복시키는 keyframe에 ease-in-out(또는 통통 튀는 느낌을 위한 커스텀 cubic-bezier)을 주고, 점마다 animation-delay를 어긋나게 합니다. 세로로 튀는 만큼 위아래 여백을 점 높이의 최소 1.5배는 남겨둬야 잘립니다.

작업이 얼마나 걸릴지 계산 가능하다면 프로그레스 바나 progress-ring 같은 확정적 로더로 바꾸세요. 감싸는 요소에 role="status"·aria-live="polite"를 주고 점은 aria-hidden="true"로 숨기며, 움직임에 민감한 사용자를 위해 prefers-reduced-motion에서는 진폭을 줄이거나 정적 텍스트로 대체하는 걸 고려합니다.