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

궤도 로더

Orbit Loader

작은 점들이 위성처럼 중심을 도는 궤도를 그리며 회전하는 비확정적 로더.

다른 이름: Orbiting dots
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="orb" aria-hidden="true"><i class="core"></i><div class="path"><span class="p1"></span></div><div class="path path2"><span class="p2"></span></div></div>
  <span class="cap">회전하는 컨테이너 + 점 오프셋</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.orb{position:relative;width:clamp(46px,14vmin,80px);height:clamp(46px,14vmin,80px);display:grid;place-items:center}
.core{width:22%;height:22%;border-radius:50%;background:var(--muted)}
.path{position:absolute;inset:0;animation:orbrot 1.6s linear infinite}
.path2{animation-duration:1.1s;animation-direction:reverse;inset:14%}
.path span{position:absolute;top:0;left:50%;width:18%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-10%)}
.p1{background:var(--accent)}
.p2{background:var(--accent-2)}
@keyframes orbrot{to{transform:rotate(360deg)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

링 스피너와 목적은 같은 "처리 중" 신호지만, 테두리 하나가 아니라 독립된 점들이 궤도를 도는 모습이라 더 유기적이고 눈에 띕니다. 브랜드 성격이 강조돼야 하는 스플래시 화면에 어울리고, 버튼처럼 작은 자리에는 과합니다.

점을 감싸는 컨테이너를 중심 기준으로 rotate시키되, 점 자체는 컨테이너 중심에서 transform: translateY(-반지름)만큼 밀어내 궤도 위에 놓습니다. 점이 여러 개면 각각 다른 회전 지속시간이나 반대 방향을 줘서 서로 어긋나게 만들 수 있고, 점마다 옅은 잔상(trailing) 그림자를 주면 속도감이 더해집니다.

전체 화면을 오래 가리는 로딩이면 스켈레톤을, 200ms 이내로 끝날 대기라면 생략을 고려하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 점들은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 회전 속도를 늦추거나 점을 고정된 위치의 정적 이미지로 대체할 수 있습니다.