← 목록으로
프로그레스 인디케이터
Linear Progress Bar
다양한 크기와 스타일의 선형 프로그레스 바입니다.
Circular Progress
다양한 크기의 원형 프로그레스 인디케이터입니다.
Step Progress (Multi-step Wizard)
여러 단계로 구성된 프로세스를 시각화합니다.
15. 프로그레스 인디케이터
Create progress indicator components:
**Linear Progress Bar**:
- Height: 8px (configurable: 4px thin, 12px thick)
- Border-radius: full (pill shape)
- Background track: gray-200
- Fill: brand gradient or solid color
- Animation: width transition 300ms ease-out
- Indeterminate: sliding animation left-to-right
**Circular Progress**:
- SVG-based for crisp rendering
- Sizes: sm(32px), md(48px), lg(64px)
- Stroke-width proportional to size
- Background track: gray-200
- Progress arc: brand color
- Rotation: -90deg start (12 o'clock)
- Animation: stroke-dashoffset transition
- Center text option: percentage number
**Progress with Label**:
- Bar + percentage text right-aligned
- Or bar + "Step 2 of 5" format
- Below label: current task description
**Step Progress** (multi-step wizard):
- Horizontal: circles connected by lines
- States: completed (check), current (filled), upcoming (outline)
- Labels below each step
- Responsive: hide labels on mobile, keep icons
**Loading Spinner**:
- SVG animated spinner
- Sizes: 16, 20, 24, 32, 48px
- Color: currentColor (inherits)
- Smooth infinite rotation
Tech: React + Tailwind + SVG animations