Spinner
먼저 보고, 그다음 계약을 읽습니다
진척률을 알 수 없는 로딩 시그널 — CSS-only 회전 원.
Component intent의도와 경계 읽기
동기 LLM 호출·network round-trip 처럼 진척을 측정할 수 없는 대기 상태의 표준 인디케이터. SVG circle + stroke-dasharray 회전으로 JS 의존 없이 돈다. size 로 크기(sm 16 / md 20 / lg 32px)를, label 로 접근/시각 텍스트를 정한다 — showLabel=false(기본)면 sr-only, true 면 옆에 함께 렌더. ToolCallCard 의 running 상태에 인라인으로 자연스럽게 들어간다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Spinner } from "@axe/ui";<Spinner label="Agent 실행 중" />import { Spinner } from "@axe/ui";<Spinner size="lg" label="불러오는 중…" showLabel /><span class="axe-spinner axe-spinner--md" role="status" aria-live="polite" aria-label="Loading"> <svg class="axe-spinner__svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"> <circle class="axe-spinner__track" cx="12" cy="12" r="10" stroke-width="3" /> <circle class="axe-spinner__head" cx="12" cy="12" r="10" stroke-width="3" stroke-linecap="round" /> </svg> <span class="axe-spinner__dot" aria-hidden="true"></span> <span class="axe-sr-only">Loading</span></span>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
size | "sm" | "md" | "lg" | — | "md" | 크기 — sm 16px · md 20px · lg 32px. 실제 치수는 svg width/height(px)로 적용. |
label | string | — | "Loading" | 접근 텍스트. showLabel=false 면 sr-only(aria-label), true 면 시각 라벨로도 렌더. |
showLabel | boolean | — | false | true 면 스피너 옆에 label 을 눈에 보이게 표시. |
...rest | React.HTMLAttributes<HTMLSpanElement> | — | — | className 병합, 나머지는 루트 <span> 으로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-spinner | stable | 루트 span — inline-flex·accent 색·라벨과 gap. |
.axe-spinner__label | stable | 시각 라벨(showLabel=true) — text-sm·secondary. |
.axe-spinner__svg | internal | 회전하는 SVG(0.9s linear). reduced-motion 시 hidden. |
.axe-spinner__track | internal | 배경 원 stroke(currentColor 18%). |
.axe-spinner__head | internal | 회전 헤드 stroke(dasharray 1/4 가시). |
.axe-spinner__dot | internal | reduced-motion 대체 dot(평소 숨김, motion off 시 pulse). |
.axe-spinner--sm | internal | size 마커 — 전용 CSS 규칙 없음(크기는 svg px). sm/md/lg 동일. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
루트 <span> 에 role="status" + aria-live="polite" + (showLabel=false 일 때)aria-label=label. SVG 는 aria-hidden focusable=false. showLabel 여부와 무관하게 label 텍스트가 항상 DOM 에 존재(false 면 .axe-sr-only 로 시각만 숨김) → SR 에 상태가 전달된다.
비대화 요소라 키보드 상호작용 없음. prefers-reduced-motion 시 회전 SVG 를 숨기고 dot pulse(깜박임)로 대체.