Loading Indicators
Loading Indicator는 비동기 작업의 진행 상태를 시각적으로 표현하는 컴포넌트입니다. 3가지 스타일과 4가지 사이즈를 제공합니다.
Figma 컴포넌트: Loading indicator
Style
Line simple
회색 트랙 위에 보라색 호가 회전하는 가장 단순한 형태입니다.
Line spinner
트랙 없이 그라데이션 호만 회전하는 형태입니다.
Dot circle
12개의 점이 원형으로 배치되어 회전하는 형태입니다. 점의 투명도가 점진적으로 변해 회전 방향을 강조합니다.
Without supporting text
supportingText prop을 비우면 라벨 없이 스피너만 표시됩니다.
Custom label
supportingText로 라벨을 자유롭게 변경할 수 있습니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
style | 'line-simple' | 'line-spinner' | 'dot-circle' | 'line-simple' | 스피너 스타일 |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 스피너 크기 (32 / 48 / 64 / 80px) |
supportingText | string | 'Loading...' | 스피너 아래 표시할 라벨. 빈 문자열이면 숨김 |
Figma Variants
| Property | Values |
|---|---|
| Style | Line simple Line spinner Dot circle |
| Size | sm md lg xl |
| Supporting text | True False |