스켈레톤 Skeleton
내용이 불러와지는 동안 자리 모양만 회색으로 보여주는 로딩 화면
다른 이름: 스켈레톤 로딩, 로딩 자리표시, Skeleton screen, Shimmer, Placeholder
HTML 코드
<div class="sk-card"><div class="sk img"></div><div class="sk line w60"></div><div class="sk line"></div><div class="sk line w80"></div></div>
<style>
.sk-card{max-width:280px;padding:12px;border:1px solid var(--border);border-radius:12px}
.sk{border-radius:6px;background:linear-gradient(90deg,var(--surface) 25%,var(--border) 50%,var(--surface) 75%);background-size:200% 100%;animation:sh 1.2s infinite linear}
.img{aspect-ratio:16/9;margin-bottom:12px}
.line{height:12px;margin-top:8px}
.w60{width:60%;height:16px}.w80{width:80%}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}
</style>AI에게 이렇게 요청하세요
카드 목록 로딩 중에 실제 카드와 같은 크기로 이미지·제목·두 줄 설명 자리를 회색 막대로 보여주고 왼쪽에서 오른쪽으로 반짝이는 스켈레톤 넣어줘
<div class="sk-card"><div class="sk img"></div><div class="sk line w60"></div><div class="sk line"></div><div class="sk line w80"></div></div>
<style>
.sk-card{max-width:280px;padding:12px;border:1px solid var(--border);border-radius:12px}
.sk{border-radius:6px;background:linear-gradient(90deg,var(--surface) 25%,var(--border) 50%,var(--surface) 75%);background-size:200% 100%;animation:sh 1.2s infinite linear}
.img{aspect-ratio:16/9;margin-bottom:12px}
.line{height:12px;margin-top:8px}
.w60{width:60%;height:16px}.w80{width:80%}
@keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}}
</style>언제 쓰나
목록·카드·프로필처럼 모양이 정해진 내용을 불러올 때. 스피너보다 덜 기다리는 느낌을 줍니다.
비슷한 것과 차이
- 스피너: 모양을 알 수 없거나 짧은 작업(버튼 저장 중)에 사용
- 빈 상태: 불러오기가 끝났는데 데이터가 없음