12 CSS Skeleton Loaders 04 / 12
Image Card
A 16:9 image placeholder topped with a title and two body lines — the "feed item" template every social and blog UI ships with.
The code
<div class="sk-card"> <div class="sk-card-img"></div> <div class="sk-card-title"></div> <div class="sk-card-line" style="width: 95%"></div> <div class="sk-card-line" style="width: 75%"></div> </div>
<div class="sk-card">
<div class="sk-card-img"></div>
<div class="sk-card-title"></div>
<div class="sk-card-line" style="width: 95%"></div>
<div class="sk-card-line" style="width: 75%"></div>
</div>.sk-card {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 10px;
background: #15151b;
}
.sk-card-img,
.sk-card-title,
.sk-card-line {
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skShimmer 1.6s linear infinite;
border-radius: 6px;
}
.sk-card-img {
aspect-ratio: 16 / 9;
margin-bottom: 4px;
}
.sk-card-title {
height: 14px;
width: 70%;
}
.sk-card-line {
height: 9px;
}
@keyframes skShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-card,
.sk-card * {
animation: none !important;
}
}
.sk-card {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 10px;
background: #15151b;
}
.sk-card-img,
.sk-card-title,
.sk-card-line {
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skShimmer 1.6s linear infinite;
border-radius: 6px;
}
.sk-card-img {
aspect-ratio: 16 / 9;
margin-bottom: 4px;
}
.sk-card-title {
height: 14px;
width: 70%;
}
.sk-card-line {
height: 9px;
}
@keyframes skShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-card,
.sk-card * {
animation: none !important;
}
}