Progress
끝이 정해진 작업(업로드, 내보내기)의 진행률을 보여 줘요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
내보내는 중
내보내는 중
내보내는 중
내보내는 중
내보내는 중
사용법
- 끝을 모르면 쓰지 않아요끝을 알 수 없는 기다림은 Button loading이나 Skeleton을 써요.
- 막대트랙 높이 4 bg/subtle radius/full, 채움 bg/primary가 duration/normal로 늘어나요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| value | 현재 값 (필수) | — |
| max | 최댓값 | 100 |
| label | 라벨 문구. 없으면 aria-label 필수 (타입으로 강제) | — |
코드
tsx
<Progress value={45} label="내보내는 중" />