컴포넌트
DualRingLoader
바깥 링과 안쪽 링이 서로 반대 방향으로 회전하는 이중 링 로더로, 순수 CSS 회전과 SVG 아크로 구현하고 reduced-motion 시 정지한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DualRingLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | 120 | 로더 전체 지름(px). |
| thickness | number | 8 | 각 링의 두께(px). 지름 절반으로 클램프됨. |
| outerColor | string | #C084FC | 바깥 링(시계 방향) 색상. |
| innerColor | string | #EC4899 | 안쪽 링(반시계 방향) 색상. |
| outerDuration | number | 1400 | 바깥 링 1회전 시간(ms). 최소 200ms. |
| arcRatio | number | 0.72 | 각 링 아크가 원둘레에서 차지하는 비율(0~1). |