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

이중 링

Dual Ring

서로 반대 방향으로 도는 두 겹의 링으로, 홑겹 스피너보다 역동적인 인상을 주는 로더.

다른 이름: Double ring loader
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="dr" aria-hidden="true"><div class="dr-out"></div><div class="dr-in"></div></div>
  <span class="cap">중첩 링 + 반대 방향 회전</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.dr{position:relative;width:clamp(40px,13vmin,72px);height:clamp(40px,13vmin,72px)}
.dr-out,.dr-in{position:absolute;inset:0;border-radius:50%;border:clamp(3px,.9vmin,5px) solid var(--line)}
.dr-out{border-top-color:var(--accent);animation:dro 1s linear infinite}
.dr-in{inset:22%;border-top-color:var(--accent-2);animation:dri .7s linear infinite reverse}
@keyframes dro{to{transform:rotate(360deg)}}
@keyframes dri{to{transform:rotate(360deg)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

기능적으로는 링 스피너와 동일하게 "처리 중"만 알리는 비확정적 표시지만, 두 겹이 반대로 돌면서 시선을 더 끕니다. 오래 쳐다볼 로딩 화면(스플래시, 초기 부팅)처럼 존재감이 필요한 자리에 어울리고, 버튼처럼 작은 자리에서는 홑겹 링 스피너가 더 낫습니다.

바깥 링과 안쪽 링을 겹쳐 놓고 각각 border-top-color만 다르게 칠한 뒤, 바깥은 rotate 정방향, 안쪽은 rotate 역방향으로 서로 다른 애니메이션 지속시간을 줍니다. 두 원의 반대 회전이 만드는 시차가 홑겹 스피너보다 "무게감 있는 기계"처럼 보이게 합니다.

로딩이 200ms 이내로 끝날 것 같으면 보여주지 않는 게 낫고, 전체 화면을 오래 가리는 경우엔 스켈레톤을 우선 고려하세요. 감싸는 요소에 role="status"·aria-live="polite"를 주고 링 자체는 장식이라 스크린리더에서 숨겨도 됩니다. prefers-reduced-motion에서는 회전 속도를 늦추거나 단일 링으로 단순화하는 것을 권합니다.