컴포넌트
DotsBounce
여러 점이 순차 지연(stagger)으로 상하 바운스하는 순수 CSS 로딩 인디케이터로, 브랜드 3색 순환·재생/정지 토글·모션 최소화를 지원한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DotsBounce-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| count | number | 3 | 바운스하는 점의 개수(1개 이상). |
| size | number | 14 | 점 하나의 지름(px). |
| duration | number | 900 | 한 바운스 사이클 시간(ms). 작을수록 빠르게 튄다. |
| bounceHeight | number | 18 | 점이 튀어오르는 최대 높이(px). |
| colors | string[] | [#C084FC, #EC4899, #5EEAD4] | 점에 순환 적용할 색상 배열(미지정 시 브랜드 3색). |
| showControl | boolean | true | 재생/정지 토글 버튼 노출 여부. |