Skeleton Loader
コンテンツ読み込み中に表示するスケルトンUI。
HTML
<div class="skeleton-card"> <div class="sk-line sk-title"></div> <div class="sk-line sk-text"></div> <div class="sk-line sk-text short"></div> </div>
CSS
.skeleton-card {
width: 240px;
padding: 20px;
background: #fff;
border-radius: 10px;
border: 1px solid #f0f0f0;
}
.sk-line {
height: 12px;
border-radius: 6px;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
margin-bottom: 10px;
}
.sk-title { width: 60%; height: 14px; margin-bottom: 16px; }
.sk-text { width: 100%; }
.sk-text.short { width: 70%; }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}