컴포넌트
Progress Ring
원형 진행률 링이 채워지면서 중앙 숫자가 0부터 목표값까지 카운트업되는 컴포넌트. SVG circle의 stroke-dashoffset과 requestAnimationFrame(rAF)을 이용해 링 채움과 숫자 증가를 부드럽게 동기화하며, easeOutCubic 이징으로 감속 효과를 준다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ProgressRing-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | 72 | 목표 진행률 (0~100). 범위를 벗어나면 자동으로 클램프된다. |
| size | number | 180 | 링(SVG) 전체 지름(px). |
| strokeWidth | number | 14 | 링 두께(px). |
| duration | number | 1400 | 애니메이션 지속 시간(ms). |
| colorFrom | string | "#C084FC" | 진행 링 그라데이션 시작 색. |
| colorTo | string | "#EC4899" | 진행 링 그라데이션 끝 색. |
| trackColor | string | "#2A2440" | 트랙(배경 링) 색. |
| suffix | string | "%" | 중앙 숫자 뒤에 붙는 접미사. |
| label | string | "완료" | 진행률 숫자 아래에 표기되는 라벨 텍스트. |
| ariaLabel | string | undefined | 접근성 라벨. 미지정 시 label 기반 기본값 사용. |