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

링 스피너

Spinner Ring

원의 한쪽 테두리만 다른 색으로 칠해 계속 돌리는, 가장 단순한 회전형 로더.

다른 이름: Ring spinnerLoading ring
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="ring" aria-hidden="true"></div>
  <span class="cap">border-top 색상 + rotate</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.ring{width:clamp(34px,11vmin,64px);height:clamp(34px,11vmin,64px);border-radius:50%;border:clamp(3px,.9vmin,5px) solid var(--line);border-top-color:var(--accent);animation:sr .8s linear infinite}
@keyframes sr{to{transform:rotate(360deg)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

버튼 안, 인라인 로딩처럼 작은 자리에서 "처리 중"임을 알리는 표준적인 비확정적 표시입니다. 얼마나 걸릴지 모르는 짧은 요청(폼 제출, API 호출)에 알맞고, 작업이 몇 단계로 나뉘어 진행률을 알 수 있다면 확정적인 progress-ring으로 바꾸는 편이 사용자에게 더 유용합니다.

원 테두리(border)를 전체는 옅은 색(var(--line))으로, 위쪽 한 변만 강조색으로 칠한 뒤 transform: rotate를 linear로 무한 반복합니다. CSS 세 줄로 끝나는 가장 저렴한 로더라 재사용 컴포넌트의 기본값으로 자주 쓰입니다.

너무 빨리 사라졌다 나타나면 깜빡임처럼 느껴지므로 로딩이 200ms 이내로 끝날 것 같으면 아예 보여주지 않는 게 낫고, 화면 전체를 가리는 긴 로딩이라면 스켈레톤이 체감 속도 면에서 더 좋습니다. 감싸는 요소에 role="status"와 aria-live="polite"를 주고, 회전 자체는 장식이라 스크린리더에 알릴 필요 없이 숨겨도 됩니다. prefers-reduced-motion에서는 회전 대신 정적 링 아이콘으로 대체하는 것도 고려할 만합니다.