컴포넌트
RippleLoader
중심에서 태어난 동심원 리플이 바깥으로 확장되며 페이드아웃하는 Canvas2D 기반 로딩 인디케이터.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RippleLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | 160 | 캔버스 정사각 한 변 크기(px). 컨테이너보다 크면 컨테이너에 맞춰 축소된다. |
| count | number | 4 | 동시에 살아있는 리플의 최대 개수. 방출 주기는 lifespan/count로 결정된다. |
| lifespan | number | 2600 | 리플 한 개의 수명(ms). 클수록 천천히 퍼지며 오래 남는다. |
| thickness | number | 2.5 | 리플 링의 선 두께(px). |
| colors | readonly string[] | ["#C084FC", "#EC4899", "#5EEAD4"] | 리플에 순환 적용할 색 배열. 방출마다 다음 색을 사용한다. |
| showCore | boolean | true | 중심의 고정 발광 코어 점 표시 여부. |