Spinner
인라인 로딩 인디케이터 — transform 회전만 사용(컴포지터 친화). role="status" + 기본 라벨 '로딩 중', reduced-motion에서는 정지 대신 감속합니다.
마지막 업데이트 2026-06-11
한눈에#
버튼 안, 텍스트 옆 등 인라인 자리에 쓰는 로딩 표시입니다. 진행률을 알 수 있다면 Progress를, 레이아웃 골격을 유지해야 한다면 Skeleton을 쓰세요.
- 인라인 로딩
- transform 회전
- role=status
- reduced-motion 감속
지름은 icon.size 토큰과 동기 — 트랙/헤드가 currentColor를 따라 색만 바꿔 재사용합니다
사용 시점#
진행률을 모르는 인라인 대기에는 Spinner — 진행률이나 레이아웃 골격이 필요하면 다른 컴포넌트입니다.
쓴다
버튼 안·텍스트 옆처럼 진행률 없이 잠깐 도는 인라인 대기
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
import { Spinner } from '@wds/ui-web';
<Spinner aria-label="불러오는 중" />변형#
variant prop이 없습니다 — 색은 기본 color.primary이며, 트랙(20% 투명)과
헤드가 currentcolor를 따르므로 className으로 색만 바꿔 재사용합니다.
크기#
sizediametertokensm16pxicon.size-smmd20pxicon.size-mdlg24pxicon.size-lg
지름은 font-size 1em 기법으로 구현되어 icon.size-* 토큰과 항상 같습니다.
상태#
항상 회전하는 단일 상태입니다. prefers-reduced-motion: reduce에서는
정지 대신 감속(1.6s 주기)합니다 — “진행 중”이라는 정보 자체는 모션이
전달하므로 완전히 멈추지 않습니다.
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | 지름 16/20/24px — icon.size 토큰과 동기 |
…rest | HTMLAttributes<span> | — | role(기본 'status') · aria-label(기본 '로딩 중') 오버라이드 포함 |
접근성#
role="status"— polite 라이브 리전으로 도착 시 한 번 낭독됩니다- 기본
aria-label‘로딩 중’ — 문맥에 맞게 바꾸세요 (예: ‘검색 결과 로딩 중’) - 내부 SVG는
aria-hidden+focusable="false"— 장식으로만 취급됩니다 - 모션은 transform 회전만(컴포지터 친화), reduced-motion에서 감속
토큰#
component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).
| 속성 | 토큰 |
|---|---|
| 색 | color.primary (트랙은 currentcolor 20%) |
| 크기 | icon.size-sm/md/lg (1em 기법) |
| 모션 | duration.slow 회전 (reduced-motion 시 1.6s — duration 토큰 범위 밖 리터럴, 시드 동일) |