Progress

Mobile

순수 시각 primitive — 플랫폼 분기 없음. Web 명세 그대로 mobile에 적용.

Preview

States

기본 fill 색은 brown-800. 상태에 따른 색 변경은 className으로 오버라이드합니다.

State	Value	Fill
idle	0%	— (빈 트랙)
progressing	1–79%	`brown-800`
warning	≥80%	`amber-500` (via `className`)
error / over limit	≥100%	`rose-500` (via `className`)
complete	100%	`brown-800`

Sizes

기본 h-2 (8px). className으로 오버라이드합니다.

용도	className	높이
Top-of-screen indicator	`h-0.5`	2px
Default	`h-2`	8px
명시적 진행 (quota 등)	`h-3`	12px

Token Mapping

Token	Value
track bg	`stone-100`
fill (default)	`brown-800`
fill (warning)	`amber-500`
fill (error)	`rose-500`
radius	`rounded-full`
height	`h-2` (8px)
animation	`transition-all`

Props

interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value?: number  // 0 이상, default: 0
  max?: number    // default: 100
}

className으로 fill 색을 오버라이드할 때는 [&>div]:bg-{color} 패턴을 사용합니다.

Usage

{/* 기본 */}
<Progress value={65} />

{/* max 지정 */}
<Progress value={usedMinutes} max={quotaMinutes} />

{/* 경고 상태 (사용량 80% 이상) */}
<Progress
  value={usedMinutes}
  max={quotaMinutes}
  className="[&>div]:bg-amber-500"
/>

{/* 초과 상태 */}
<Progress
  value={usedMinutes}
  max={quotaMinutes}
  className="[&>div]:bg-rose-500"
/>

role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax 설정
퍼센트 또는 진행 상태를 인접 텍스트로 병행 제공

Do / Don't

Do: 결정된 진행률에만 사용 — indefinite 로딩은 Spinner
Do: 경고/초과 상태는 색 변경과 함께 텍스트로도 전달 (색맹 대응)
Don't: 진행률 없이 애니메이션 목적으로만 사용 금지

Progress

On this page