Progress Indicators
진행 상태를 시각적으로 표현하는 컴포넌트입니다. 가로 막대 형태의 Progress bar와 원형 형태의 Progress circle을 제공합니다.
Figma 컴포넌트: Progress bar, Progress circle
Progress Bar
Label variants
라벨 위치를 5가지 형태로 설정할 수 있습니다.
No label
라벨 없이 진행바만 표시합니다.
Right
진행바 우측에 % 텍스트를 표시합니다.
Bottom
진행바 하단에 % 텍스트를 표시합니다.
Top floating
진행률 위치 위에 작은 라운드 박스로 표시합니다.
Bottom floating
진행률 위치 아래에 작은 라운드 박스로 표시합니다.
Progress Circle
Circle (전체 원)
전체 원형 트랙 위에 진행 상황을 시계 방향으로 표시합니다.
Half circle (반원)
상단 반원 형태의 게이지로 표시합니다.
Progress values
다양한 진행률 표시 예시입니다.
Props
<ProgressBar />
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | 진행률 (0–100) |
label | 'right' | 'bottom' | 'top-floating' | 'bottom-floating' | false | 'right' | 라벨 위치. false면 라벨 없음 |
width | number | string | - | 진행바 width (기본 부모 너비를 채움) |
<ProgressCircle />
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 40 | 진행률 (0–100) |
size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'md' | 크기 |
shape | 'circle' | 'half-circle' | 'circle' | 전체 원 / 반원 |
label | string | 'Active users' | 중앙 보조 라벨 |
showLabel | boolean | true | 보조 라벨 표시 여부 |
Figma Variants
Progress bar
| Property | Values |
|---|---|
| Progress | 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% |
| Label | False Right Bottom Top floating Bottom floating |
Progress circle
| Property | Values |
|---|---|
| Shape | Circle Half circle |
| Size | xxs xs sm md lg |