Design Atlas
한국어
◌ Loaders gallery

Orbit Loader

궤도 로더

Small dots circling a center point like satellites in orbit — an indeterminate loader.

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

Serves the same "still working" purpose as a ring spinner, but independent dots circling an orbit read as more organic and eye-catching than a single spinning border. It suits a splash screen where brand personality matters; it's too much for a small spot like a button.

A wrapper rotates around its own center while each dot is pushed out from that center with transform: translateY(-radius), placing it on the orbit. With more than one dot, giving each a different rotation duration or an opposite direction staggers them apart, and a faint trailing shadow per dot adds a sense of speed.

Prefer a skeleton for a long wait covering the whole screen, and consider skipping it under 200ms. Give the wrapper role="status" and aria-live="polite", and hide the dots with aria-hidden="true" since they're decorative. Under prefers-reduced-motion, slow the rotation or replace the dots with a static image at a fixed position.