디자인 아틀라스
EN
◌ 로더·로딩 갤러리

리플 로더

Ripple Loader

테두리만 있는 원이 물결처럼 겹쳐 퍼져나가며 사라지는, 파문 형태의 비확정적 로더.

다른 이름: Ripple ringsRadar loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="rp" aria-hidden="true"><span></span><span></span><span></span><i class="dot"></i></div>
  <span class="cap">테두리 원 확장 + 스태거</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.rp{position:relative;width:clamp(40px,13vmin,72px);height:clamp(40px,13vmin,72px);display:grid;place-items:center}
.rp span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-3);animation:rip 1.8s ease-out infinite}
.rp span:nth-child(2){animation-delay:.6s}
.rp span:nth-child(3){animation-delay:1.2s}
.rp .dot{width:22%;height:22%;border-radius:50%;background:var(--accent-3)}
@keyframes rip{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.05);opacity:0}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

펄스 로더를 여러 겹으로 늘린 형태로, 지도의 "내 위치" 마커나 레이더 스캔처럼 무언가를 계속 찾거나 확인하는 중임을 알리는 데 어울립니다. 확정적인 값이 없다는 점은 다른 비확정적 로더와 같아서, 진행률이 생기면 progress-ring으로 바꿔야 합니다.

테두리만 있는 원(배경 없이 border만) 2~3개를 같은 위치에 겹쳐두고, scale을 0에서 커지는 값으로, opacity를 1에서 0으로 함께 움직이는 keyframe에 animation-delay를 어긋나게 줘서 순서대로 퍼져나가게 만듭니다. 링 개수가 늘수록 물결이 촘촘해지지만 3개를 넘기면 오히려 산만해집니다.

화면 전체를 오래 가리는 로딩에는 스켈레톤이 더 낫고, 200ms 이내로 끝나는 대기면 생략하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 링은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 링 개수를 줄이거나 확산 애니메이션을 멈추고 정적 원 하나로 대체할 수 있습니다.