본문으로 건너뛰기

ProgressBar

프로그레스 바는 작업 진행 상황, 로딩 프로세스, 완료율 등을 시각적으로 표시하기 위한 컴포넌트입니다. 사용자에게 진행 중인 작업의 완료 정도를 백분율로 보여줍니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 ProgressBar 컴포넌트의 모습을 확인해보세요.

50%
valuenumber
진행 상태 값
labelselect
진행 상태 라벨

기본 사용법​

import { ProgressBar } from '@ncds/ui';

function App() {
  return <ProgressBar value={50} />;
}

Props​

PropTypeDefaultDescription
valuenumber-진행 상태를 나타내는 값. 0에서 100 사이의 숫자여야 합니다.
label'right' | 'bottom' | 'top-float' | 'bottom-float'-퍼센트 레이블의 위치를 지정합니다.

상세 예제 (Detailed Examples)​

기본 프로그레스 바​

가장 기본적인 형태의 프로그레스 바입니다. value prop만 설정하면 됩니다.

다양한 레이블 위치​

프로그레스 바는 4가지 다른 레이블 위치를 지원합니다.

오른쪽 레이블​

40%
40%

하단 레이블​

60%
60%

상단 플로팅 레이블​

75%
75%

하단 플로팅 레이블​

진행 상태에 따라 레이블 위치가 이동합니다.

85%
85%

다양한 값으로 진행 정도 표시​

프로그레스 바는 0에서 100 사이의 값을 표시합니다. 값이 범위를 벗어나면 자동으로 0과 100 사이로 조정됩니다.

0%
25%
50%
75%
100%
0%
25%
50%
75%
100%