컴포넌트
Gauge Meter
반원 아크 게이지가 목표치까지 rAF 이징으로 스윕하고 니들이 회전하며, 퍼센트가 카운트업된다. SVG 아크 stroke-dasharray 로 진행 비율을 채우고 그라데이션(teal→violet→magenta) 트랙을 사용한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GaugeMeter-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | 72 | 목표 게이지 값 (0~100). 범위를 벗어나면 자동 clamp 된다. |
| unit | string | "%" | 게이지 숫자 뒤에 붙는 단위 텍스트. |
| className | string | undefined | 루트 요소에 추가할 CSS 클래스. |