Components

Skeleton

로딩 중 콘텐츠의 뼈대를 미리 보여줍니다.

코드 보기
<div class="tn-skel" style="height:10px;width:55%"></div>

Variants

이름설명미리보기
텍스트높이 8~10px 바
아바타원형
카드실제 레이아웃 뼈대 그대로

Guidelines

✓ Do
  • 실제 콘텐츠 레이아웃과 같은 자리·크기로
  • 0.5초 이상 걸릴 때만 표시
✕ Don't
  • 스피너와 동시에 쓰지 않는다
  • 화면 전체를 스켈레톤으로 덮지 않는다

Specification

속성토큰/값비고
애니메이션shimmer 1.4s
radius6px