Progress

작업 진행률을 보여주는 바입니다.

데모

프로필 완성도72%

파일 업로드128MB / 200MB

코드

<div className="flex items-center justify-between text-sm">
  <span>프로필 완성도</span>
  <span className="text-muted-foreground">72%</span>
</div>
<Progress value={72} />

사용 규칙

진행률 옆에 숫자(%, 용량 등) 텍스트를 함께 보여줘 정확한 값을 전달한다.
값이 확정되지 않은 무기한 대기는 Progress 대신 Spinner를 사용한다.
0~100 범위의 value를 항상 명시적으로 넘긴다.

Don't

Progress value를 음수나 100 초과로 넘기지 않는다.
완료(100%) 상태를 계속 보여주지 않는다 — 완료 즉시 결과 UI로 전환한다.