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

도트 매트릭스 로더

Dot Matrix Loader

원 둘레에 점을 늘어놓고 밝기를 순서대로 옮겨가며, 회전 없이도 도는 것처럼 보이는 로더.

다른 이름: LED dot loaderCircular dot spinner
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="dm" aria-hidden="true">
    <i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i>
    <i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i>
  </div>
  <span class="cap">점마다 opacity delay = 회전 없는 회전 착시</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.dm{position:relative;width:clamp(38px,12vmin,68px);height:clamp(38px,12vmin,68px)}
.dm i{position:absolute;top:0;left:50%;width:16%;aspect-ratio:1;border-radius:50%;background:var(--accent);
  transform:rotate(calc(var(--i) * 45deg)) translate(-50%,0);transform-origin:50% calc(clamp(19px,6vmin,34px));
  animation:dm 1.2s linear infinite;animation-delay:calc(var(--i) * -.15s)}
@keyframes dm{0%{opacity:1}100%{opacity:.15}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

링 스피너와 결과(원이 도는 것처럼 보임)는 비슷하지만 방식이 다릅니다 — 실제로는 아무것도 회전하지 않고, 고정된 위치의 점들이 순서대로 밝아졌다 어두워지길 반복할 뿐입니다. iOS의 기본 활동 표시기가 이 방식이고, transform: rotate보다 애니메이션 속성이 opacity 하나뿐이라 저사양 기기에서도 버벅임 없이 매끄럽습니다.

점 8~12개를 원 둘레에 각도(360° ÷ 점 개수)만큼 회전시켜 배치한 뒤, 각 점에 밝기를 낮췄다 되돌리는 keyframe을 주고 animation-delay를 (전체 주기 ÷ 점 개수)만큼씩 어긋나게 합니다. 배치에 쓰인 rotate는 요소를 고정하는 용도일 뿐 애니메이션되지 않는다는 점이 핵심이라, transform 애니메이션의 저더링 없이 회전 착시를 만듭니다.

화면 전체를 가리는 긴 로딩에는 스켈레톤이 낫고, 200ms 이내로 끝날 대기면 생략하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 점들은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 순차적인 밝기 변화 대신 전체 점이 동시에 옅게 깜빡이는 정도로 단순화할 수 있습니다.