컴포넌트
SpinnerDotsCircle
원 둘레에 등각으로 배치된 점들이 순차적 투명도 위상차로 페이드하며 꼬리(trail)처럼 회전하는 순수 CSS 로딩 스피너.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SpinnerDotsCircle-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 12 | 원 둘레에 배치할 점 개수 (3~24 범위로 자동 보정). |
| size | number | 56 | 전체 스피너 지름(px). 점 반지름·배치 계산의 기준. |
| duration | number | 1200 | trail이 원을 한 바퀴 도는 시간(ms). 작을수록 빠르게 회전. |
| palette | "brand" | "mono" | "brand" | 색 팔레트. brand=3색 순환(#C084FC/#EC4899/#5EEAD4), mono=단색. |
| minOpacity | number | 0.12 | 페이드 저점(가장 흐린 점)의 최소 불투명도(0~1). |
| ariaLabel | string | "불러오는 중입니다" | 스크린리더 안내 문구(role=status). |