Skeleton
로딩 중에 정상 화면과 같은 배치로 자리만 표시해요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
text
rect
circle
사용법
- 같은 배치정상 화면의 행 수와 열 배치를 그대로 따라요.
- 화면 낭독기에는 숨겨요Skeleton은 aria-hidden, 로딩 영역 전체에 aria-busy를 둬요.
- 깜빡임opacity 1 ↔ 0.5를 duration/loop로 반복하고, reduced-motion이면 멈춰요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| shape | text · rect · circle | text |
| className | 크기는 쓰는 곳에서 정해요 | — |
코드
tsx
<div aria-busy>
<Skeleton shape="circle" />
<Skeleton shape="text" className="w-40" />
</div>