컴포넌트
Skeleton Loader
콘텐츠 로딩 중 shimmer(빛 반사 하이라이트)가 좌에서 우로 흐르는 스켈레톤 플레이스홀더. line(텍스트 줄)·circle(아바타)·card(조합)·rect(사각 블록) 등 다양한 도형 variant를 지원하며, background-position 이동으로 shimmer를 구현하고 prefers-reduced-motion 시 애니메이션을 정지한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/SkeletonLoader-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| shape | "line" | "circle" | "card" | "rect" | "line" | 도형 종류. line=텍스트 줄, circle=아바타, card=썸네일+제목+본문 조합, rect=단일 사각 블록. |
| lines | number | 3 | shape="line"일 때 반복할 줄 수. 마지막 줄은 문단 느낌을 위해 짧게 표시된다. |
| width | number | string | undefined | 너비(px 숫자 또는 CSS 문자열). circle에서는 지름으로 사용된다. |
| height | number | string | undefined | 높이(px 숫자 또는 CSS 문자열). line에서는 줄 두께로 사용된다. |
| radius | number | 8 | 모서리 반경(px). |
| duration | number | 1500 | shimmer 1회 통과 시간(ms). 값이 작을수록 빠르게 흐른다. |
| baseColor | string | "#16121F" | 스켈레톤 바닥 색(Vivid Kit 카드 톤). |
| highlightColor | string | "#2A2440" | shimmer 하이라이트 밴드 색. |
| ariaLabel | string | "콘텐츠를 불러오는 중입니다" | 스크린리더에 전달되는 로딩 안내 라벨. |