Progress
측정 가능한 작업의 진행률이나 연결 중 상태를 보여줍니다.
- 성숙도
- 후보
- 소스 경로
components/ui/progress.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
업로드, 처리, 동기화처럼 시간이 걸리는 작업의 상태에 씁니다.
사용하지 않을 때
즉시 끝나는 동작이나 최종 성공 상태를 표시하는 데 쓰지 않습니다.
변형과 상태
determinate고정 예시현재 값, 최대값과 표시 백분율이 일치하는지 확인합니다.
indeterminate고정 예시숫자 없이 진행 중 상태만 전달하는지 확인합니다.
reduced-motion환경에서 확인움직임 없이도 Primary Blue 구간으로 상태가 보이는지 확인합니다.
운영체제나 브라우저 설정을 바꾼 뒤 이 상태를 확인합니다.
접근성
native progress와 보이는 label을 연결하고 알 수 없는 값을 임의로 만들지 않습니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
label | string | 예 | 진행 중인 작업의 보이는 이름입니다. |
value | number | 아니요 | 현재 진행값이며 생략하면 indeterminate 상태입니다. |
max | number | 아니요 | 완료를 나타내는 최대값입니다. |
showValue | boolean | 아니요 | 계산된 백분율을 문구로 표시합니다. |
사용 예시
지원 importimport { Progress } from "@/components/ui/progress"
<Progress label="Upload" value={50} max={200} showValue />