Spinner
인라인 로딩 인디케이터 — transform 회전만 사용(컴포지터 친화). role="status" + 기본 라벨 '로딩 중', reduced-motion에서는 회전을 정지합니다.
마지막 업데이트 2026-06-29
한눈에#
버튼 안, 텍스트 옆 등 인라인 자리에 쓰는 로딩 표시입니다. 진행률을 알 수 있다면 Progress를, 레이아웃 골격을 유지해야 한다면 Skeleton을 쓰세요.
- 인라인 로딩
- transform 회전
- role=status
- reduced-motion 정지
지름은 icon.size 토큰과 동기 — 트랙/헤드가 currentColor를 따라 색만 바꿔 재사용합니다
사용 시점#
진행률을 모르는 인라인 대기에는 Spinner — 진행률이나 레이아웃 골격이 필요하면 다른 컴포넌트입니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
쓴다 — 버튼 안·텍스트 옆처럼 진행률 없이 잠깐 도는 인라인 대기
대신 Progress — 0–100% 진행률을 알 수 있을 때
대신 Skeleton — 콘텐츠 레이아웃 골격을 유지해 CLS를 막아야 할 때
화면 단위 판단은 Loading Feedback을 따릅니다. Spinner는 짧은 인라인 대기용이고, 목록·카드·차트 로딩의 기본값은 Skeleton입니다.
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
Spinner를 직접 조작해 보세요
속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.
플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.
변형#
variant prop이 없습니다 — 색은 기본 color.primary이며, 트랙(20% 투명)과
헤드가 currentcolor를 따르므로 className으로 색만 바꿔 재사용합니다.
크기#
지름은 font-size 1em 기법으로 구현되어 icon.size-* 토큰과 항상 같습니다.
상태#
기본 상태에서는 회전합니다. prefers-reduced-motion: reduce에서는 회전을 정지합니다.
진행 중 정보는 role="status"와 문맥 라벨로 전달하고, 모션에만 의존하지 않습니다.
Props#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | md | 지름 — icon.size 토큰과 동기 (sm 16 / md 20 / lg 24px) |
ref | Ref<HTMLSpanElement> | — | 루트 <span>으로 전달되는 ref (React 19 ref-as-prop) |
접근성#
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 시 animation: none) |