컴포넌트
FlipSquareLoader
사각형 타일이 지정한 축(가로·세로·대각) 기준으로 3D 회전해 뒤집히며 대각선 파도처럼 순차 반복되는 순수 CSS 로딩 인디케이터.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FlipSquareLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | 3 | 한 변의 타일 개수(그리드는 size×size). |
| boxSize | number | 96 | 로더 전체 한 변의 픽셀 크기. |
| axis | "x" | "y" | "xy" | "xy" | 타일 3D 회전 축(x=가로축, y=세로축, xy=대각). |
| duration | number | 1400 | 한 타일이 1회 왕복 뒤집히는 시간(ms). |
| stagger | number | 120 | 타일 인덱스별 순차 지연 계수(ms). 클수록 파도가 늘어짐. |
| frontColor | string | "#C084FC" | 타일 앞면 그라데이션 시작색(브랜드 퍼플). |