프로그레스 바
유한한 작업의 완료 비율을 트랙과 값으로 전달하며, 값은 항상 유효 범위 안으로 정규화한다.
상태
활용 방법
파일 업로드
label과 showValue를 함께 사용해 작업과 완료율을 한 덩어리로 보여준다.
Preview
파일 업로드68%
tsx
<ProgressBar value={68} label="파일 업로드" showValue />
한도 사용량
max를 지정하면 절대값을 해당 범위의 비율로 변환한다.
Preview
API quota74%
tsx
<ProgressBar value={37} max={50} label="API quota" showValue tone="warning" />
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | - | 현재 진행값 |
| max | number | 100 | 진행 범위의 최댓값 |
| label | ReactNode | - | 진행 작업 라벨 |
| showValue | boolean | false | 백분율 표시 |
| tone | "primary" | "success" | "warning" | "danger" | "primary" | 의미 톤 |
| trackClassName | string | - | progress track 확장 클래스 |