Progress
작업 진행 상태를 시각적으로 표시하는 프로그레스 바 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add progress
사용법
TSX
import { Progress, CircularProgress } from "@msub-core/ui/components/progress"
function MyComponent() {
return (
<div>
<Progress value={60} />
<CircularProgress value={75} />
</div>
)
}기본
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | number | 0 | No | 현재 진행률 (0-100) |
| max | number | 100 | No | 최대값 |
| size | "sm" | "default" | "lg" | "xl" | "default" | No | 프로그레스 바 높이 |
| variant | "default" | "success" | "warning" | "error" | "info" | "default" | No | 색상 변형 |
| indeterminate | boolean | false | No | 불확정 상태 (로딩) |
| showLabel | boolean | false | No | 라벨 표시 |
| striped | boolean | false | No | 줄무늬 애니메이션 |
| animated | boolean | false | No | 펄스 애니메이션 |
크기
Small
Default
Large
Extra Large
색상
Default
Success
Warning
Error
Info
라벨 표시
진행률75%
불확정 상태
애니메이션
진행률0%
제어 모드
진행률30%
CircularProgress
75%
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value | number | 0 | No | 현재 진행률 (0-100) |
| max | number | 100 | No | 최대값 |
| size | "sm" | "default" | "lg" | "xl" | "default" | No | 원형 크기 |
| variant | "default" | "success" | "warning" | "error" | "info" | "default" | No | 색상 변형 |
| indeterminate | boolean | false | No | 불확정 상태 (로딩) |
| strokeWidth | number | 4 | No | 선 두께 |
| showLabel | boolean | false | No | 중앙 라벨 표시 |
CircularProgress 크기
Small
Default
Large
60%
Extra Large
CircularProgress 색상
75%
75%
75%
75%
75%
실제 사용 예시
📄
document.pdf
2.4 MB
스토리지
7.2 GB / 10 GB