Progress Indicators

진행 상태를 시각적으로 표현하는 컴포넌트입니다. 가로 막대 형태의 Progress bar와 원형 형태의 Progress circle을 제공합니다.

Figma 컴포넌트: Progress bar, Progress circle

Progress Bar

Label variants

라벨 위치를 5가지 형태로 설정할 수 있습니다.

No label

라벨 없이 진행바만 표시합니다.

Right

진행바 우측에 % 텍스트를 표시합니다.

40%

80%

Bottom

진행바 하단에 % 텍스트를 표시합니다.

40%

80%

Top floating

진행률 위치 위에 작은 라운드 박스로 표시합니다.

20%

50%

80%

Bottom floating

진행률 위치 아래에 작은 라운드 박스로 표시합니다.

20%

50%

80%

Progress Circle

Circle (전체 원)

전체 원형 트랙 위에 진행 상황을 시계 방향으로 표시합니다.

40%Users

Active users40%

Half circle (반원)

상단 반원 형태의 게이지로 표시합니다.

40%Users

Active users40%

Progress values

다양한 진행률 표시 예시입니다.

Active users0%

Active users25%

Active users50%

Active users75%

Active users100%

Props

`<ProgressBar />`

Prop	Type	Default	Description
`value`	number	`0`	진행률 (0–100)
`label`	'right' \| 'bottom' \| 'top-floating' \| 'bottom-floating' \| false	`'right'`	라벨 위치. false면 라벨 없음
`width`	number \| string	`-`	진행바 width (기본 부모 너비를 채움)

`<ProgressCircle />`

Prop	Type	Default	Description
`value`	number	`40`	진행률 (0–100)
`size`	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg'	`'md'`	크기
`shape`	'circle' \| 'half-circle'	`'circle'`	전체 원 / 반원
`label`	string	`'Active users'`	중앙 보조 라벨
`showLabel`	boolean	`true`	보조 라벨 표시 여부

Figma Variants

Progress bar

Property	Values
Progress	`0%` `10%` `20%` `30%` `40%` `50%` `60%` `70%` `80%` `90%` `100%`
Label	`False` `Right` `Bottom` `Top floating` `Bottom floating`

Progress circle

Property	Values
Shape	`Circle` `Half circle`
Size	`xxs` `xs` `sm` `md` `lg`

Loading Indicators Charts