Progress
core진행률 표시. Linear 및 Circular 변형 지원.
컴포넌트 의존 관계
깊이
100%
Linear Progress
With Label
다운로드 중30%
업로드 중65%
완료100%
Variants
60%
60%
60%
60%
Circular Progress
50%
75%
Circular Variants
70%
70%
70%
70%
Animation Demo
파일 업로드0%
0%
테스트 커버리지
2026년 2월 4일4/4 통과
4성공
0실패
4전체
- progressbar role을 렌더링한다
- aria 속성을 설정한다
- label을 표시한다
- variant에 따른 스타일을 적용한다
Progress Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value* | number | — | 현재 값 |
max | number | 100 | 최대 값 |
size | "sm" | "md" | "lg" | "md" | 진행바 높이 |
variant | "default" | "success" | "warning" | "error" | "default" | 색상 변형 |
showLabel | boolean | false | 퍼센트 표시 |
label | string | — | 레이블 텍스트 |
animated | boolean | true | 애니메이션 활성화 |
CircularProgress Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
value* | number | — | 현재 값 |
max | number | 100 | 최대 값 |
size | number | 48 | 원 크기 (px) |
strokeWidth | number | 4 | 선 두께 |
variant | "default" | "success" | "warning" | "error" | "default" | 색상 변형 |
showLabel | boolean | false | 중앙에 퍼센트 표시 |
Import
tsx
import { Progress, CircularProgress } from "@reopt-ai/opt-ui";