Spinner
로딩 상태를 표시하는 회전 애니메이션 컴포넌트입니다.
개요
로딩 중로딩 중로딩 중
설치
사용법
예제
Size
로딩 중로딩 중로딩 중로딩 중로딩 중
Variant
로딩 중
default
로딩 중
primary
로딩 중
secondary
로딩 중
white
Inline
로딩 중...로딩 중...데이터 처리 중데이터 처리 중불러오는 중불러오는 중
Button Loading
Overlay
접근성
Spinner는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- role="status": 로딩 상태임을 스크린리더에 알립니다.
- aria-live="polite": 현재 작업을 방해하지 않고 로딩 상태를 알립니다.
- aria-busy="true": SpinnerOverlay에서 로딩 중임을 명시합니다.
- sr-only 텍스트: 시각 장애인을 위한 대체 텍스트를 제공합니다.
- label prop으로 상황에 맞는 명확한 로딩 메시지를 제공하세요.
- 긴 로딩 시에는 Progress 컴포넌트로 진행률을 표시하는 것을 권장합니다.