본문으로 건너뛰기

ProgressCircle

프로그레스 서클은 진행 상태를 원형 그래프로 표시하는 컴포넌트입니다. 특정 작업의 완료율이나 목표 달성도를 시각적으로 표현하는 데 적합합니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 프로그레스 서클의 모습을 확인해보세요.

30%
sizeselect
프로그레스 서클의 크기
labelstring
프로그레스 서클의 라벨
valuenumber
프로그레스 서클의 값
themeselect
프로그레스 서클의 테마

기본 사용법​

import { ProgressCircle } from '@ncds/ui-admin';

function App() {
  return <ProgressCircle size="md" value={40} />;
}
40%
40%

Props​

PropTypeDefaultDescription
size'xxs' | 'xs' | 'sm' | 'md' | 'lg'-프로그레스 서클의 크기
valuenumber-진행률 값 (0-100)
labelstring진행률(%)표시할 레이블 텍스트
theme'circle' | 'half-circle''circle'서클 모양 (원형 또는 반원형)

크기​

ProgressCircle은 5가지 크기를 지원합니다: xxs, xs, sm, md, lg

40%
40%
40%
40%
40%
40%
40%
40%
40%
40%

테마 (원형 및 반원형)​

프로그레스 서클은 두 가지 테마를 지원합니다: circle (원형), half-circle (반원형)

40%
40%
40%
40%

사용자 정의 레이블​

레이블 텍스트를 직접 지정할 수 있습니다. 레이블을 지정하지 않으면 기본적으로 퍼센트 값이 표시됩니다.

40%
진행 중
40%
40%
진행 중
40%

크기별 레이블 위치​

xxs 크기는 레이블이 외부에 표시되고, 나머지 크기는 내부에 표시됩니다.

40%
외부 레이블
40%
40%
외부 레이블
40%

다양한 값​

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