Design Atlas
한국어
◌ Loaders gallery

Dual Ring

이중 링

Two nested rings spinning in opposite directions — more dynamic than a single spinner.

Also known as: 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}

Functionally the same indeterminate "still working" signal as a spinner ring, but the two counter-rotating layers pull more attention. It suits a spot that needs presence — a splash screen, initial boot — while a single ring spinner works better in a tight space like a button.

Built by stacking an outer and inner ring, each with a differently colored border-top, then spinning the outer one forward and the inner one backward at different durations. The counter-rotation between the two reads as heavier and more mechanical than a single ring.

Skip it for loads under 200ms — it'll just flash — and prefer a skeleton for a long wait covering the whole screen. Give the wrapper role="status" and aria-live="polite"; the rings are decorative and can be hidden from screen readers. Under prefers-reduced-motion, consider slowing the rotation or falling back to a single ring.