컴포넌트
Grid Fade Loader
NxN 격자 셀이 순차적으로 페이드 인/아웃하며 웨이브처럼 흐르는 로딩 인디케이터로, 행·대각·나선 순서 패턴을 전환할 수 있다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/GridFadeLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | 3 | 격자 한 변의 셀 개수(NxN). 3이면 3x3. 2~8 범위로 클램프됨. |
| order | "row" | "diagonal" | "spiral" | "row" | 페이드 웨이브가 격자를 훑는 순서 패턴(행 우선 / 대각선 / 나선). |
| duration | number | 1600 | 웨이브 1회 순환 시간(ms). 작을수록 빠르게 흐른다. |
| cellSize | number | 26 | 셀 한 변의 크기(px). |
| color | string | "#C084FC" | 셀 기본 색상(브랜드 컬러). 밝기에 따라 보조 색과 섞인다. |
| showControls | boolean | true | 순서 패턴(row/diagonal/spiral) 전환 버튼 노출 여부. |