7onicDESIGN SYSTEM

Progress

Progress는 작업의 진행 상황을 시각적으로 표시하는 컴포넌트입니다. 리니어 바와 원형 두 가지 타입을 제공하며, 파일 업로드, 단계별 진행 등 확정적인 진행률 표시에 사용합니다.

2
Types
3
Sizes
2
Colors
Radix
Base

Playground

Preview
lineardefault0%
Type
Size
Color
Variant
Options
<Progress value={0} />

Sizes

sm
트랙 높이4px
원형 지름32px
default
트랙 높이8px
원형 지름48px
lg
트랙 높이12px
원형 지름64px

Features

Type

리니어 바와 원형 두 가지 타입을 제공합니다. 용도에 맞게 선택하세요.

<Progress value={60} />
<Progress type="circular" value={60} />

Striped

variant="striped"으로 대각선 스트라이프를 표시합니다.animated를 추가하면 흐르는 애니메이션이 활성화됩니다.

<Progress value={70} variant="striped" />
<Progress value={70} variant="striped" animated />

Show Value

showValue로 퍼센트 값을 표시합니다.formatLabel로 커스텀 포맷을 지정할 수 있습니다.

75%
75%
75%
750/1000 MB
<Progress value={75} showValue />
<Progress type="circular" value={75} showValue />
<Progress value={750} max={1000} showValue
  formatLabel={(v, max) => `${v}/${max} MB`} />

API

Component Structure

Progress— Radix Progress

독립형 컴포넌트로 서브 컴포넌트가 없습니다.

Props

type"linear"
"linear" | "circular"

표시 타입 (리니어 바 또는 원형)

value0
number

진행률 값 (0~max)

max100
number

최대값

size"default"
"sm" | "default" | "lg"

사이즈 (linear: 트랙 높이, circular: 지름)

variant"default"
"default" | "striped"

시각적 variant (linear 전용)

color"default"
"default" | "primary"

인디케이터 색상 (default: 다크, primary: 브랜드 색상)

indicatorClassNameundefined
string

인디케이터 커스텀 클래스 (color를 덮어씁니다)

showValuefalse
boolean

퍼센트 값 표시 여부

formatLabelundefined
(value: number, max: number) => string

값의 커스텀 포매터

animatedfalse
boolean

스트라이프 흐름 애니메이션 (striped variant 전용)

thicknessundefined
number

원형 스트로크 너비 (circular 전용)

labelundefined
string

접근성 레이블

classNameundefined
string

추가 CSS 클래스

Anatomy

Linear
Track
1
2
3
60%
Circular
1
2
3
60%
1
Track
배경 트랙
2
Indicator
진행 바 / 아크
3
Value
퍼센트 값 (선택)

Best Practices

✓

권장

  • ✓진행률을 측정할 수 있을 때 determinate 모드를 사용하세요
  • ✓장시간 처리에는 showValue로 진행률을 표시하세요
  • ✓상태에 맞는 color를 사용하세요 (예: 실패 시 error)
✕

지양

  • ✕진행률을 알 수 없는 경우 Progress 대신 Spinner를 사용하세요
  • ✕한 페이지에 Progress 바를 과도하게 표시하지 마세요
  • ✕액션 후 피드백에는 Progress 대신 Toast를 사용하세요

Accessibility

ARIA / WCAG

  • role="progressbar" 자동 부여
  • aria-valuenow / aria-valuemax
  • label prop으로 커스텀 레이블 설정