Spinner

비결정형 로딩 인디케이터. User-triggered 액션 또는 button pending에 사용.

비결정형 로딩 인디케이터. User-triggered 액션 또는 button pending에 사용 (초기 콘텐츠 로딩은 Skeleton).

Status: Web에는 canonical Spinner 부재 — neue primitive로 추가 예정.

Mobile

플랫폼 분기 없음 — 시각 명세는 web과 동일. RN에서는 native ActivityIndicator로 대체해도 무방하다 (색상은 본 명세에 맞춰 color={DesignColors.brown[800]} 등으로 지정).

Preview

Sizes

지원 사이즈: sm · md · lg

Default: md (20px)

Foundation Sizes 매핑 따름. 버튼 loading 상태에서는 부모 size 따름.

Size	Dimensions	Primary use
sm	16 × 16	Inline text 옆, button pending
md	20 × 20	카드 내부, inline
lg	28 × 28	Full-screen, 큰 영역

Token Mapping

Token	Value	Description
track color	`stone-100`	회전 트랙 (배경 원)
active color	`brown-800`	회전하는 호
inverse color	`white`	다크 표면 (primary button)
animation	회전 (rotate), 1000ms linear infinite

Usage

<Spinner size="md" />

<Button loading disabled>
  <Spinner size="sm" tone="inverse" />
  저장 중...
</Button>

<div className="flex items-center justify-center h-64">
  <Spinner size="lg" />
</div>

role="status" + aria-label="로딩 중" 자동
5초 이상 로딩은 상태 설명 텍스트 병행 권장

Do / Don't

Do: User-triggered 액션의 pending 상태에 사용
Do: Button loading 상태에 inline spinner
Don't: 초기 콘텐츠 로딩에 사용 금지 → Skeleton
Don't: 결정된 진행률에 사용 금지 → Progress