컴포넌트
LoaderPercentage
숫자가 0에서 목표 퍼센트까지 카운트업되며 SVG 링이 함께 채워지는 로딩 인디케이터.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/LoaderPercentage-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| target | number | 100 | 카운트업이 도달할 목표 퍼센트(0~100). |
| duration | number | 2200 | 0에서 target까지 걸리는 시간(ms). |
| size | number | 160 | 링/숫자 지름(px). |
| strokeWidth | number | 8 | 진행 링의 두께(px). |
| accentColor | string | "#C084FC" | 진행 링 그라디언트 시작 색상. |
| loop | boolean | true | 완료 후 다시 0부터 반복할지 여부. |