컴포넌트
SpinnerRing
호 형태의 그라데이션이 트랙 위를 계속 회전하는 단일 링 로딩 스피너로, conic-gradient 호와 radial-gradient 마스크로 도넛을 만들고 CSS keyframes로 회전시킨다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpinnerRing-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | 64 | 링 전체 지름(px). |
| thickness | number | 6 | 링 두께(px). 지름의 절반을 넘지 않도록 자동 클램프. |
| duration | number | 900 | 회전 1바퀴에 걸리는 시간(ms). |
| arc | number | 280 | 회전하는 호가 덮는 각도(deg, 10~360). |
| colorFrom | string | #C084FC | 호 그라데이션 시작 색(꼬리). |
| reverse | boolean | false | true면 시계 반대 방향으로 회전. |