12 CSS Skeleton Loaders 07 / 12
Article Page
A page-level skeleton: hero image, headline, byline, and four paragraph lines.
The code
<div class="sk-article"> <div class="sk-article-hero"></div> <div class="sk-article-h1"></div> <div class="sk-article-by"></div> <div class="sk-article-line" style="width: 100%"></div> <div class="sk-article-line" style="width: 95%"></div> <div class="sk-article-line" style="width: 90%"></div> <div class="sk-article-line" style="width: 60%"></div> </div>
<div class="sk-article">
<div class="sk-article-hero"></div>
<div class="sk-article-h1"></div>
<div class="sk-article-by"></div>
<div class="sk-article-line" style="width: 100%"></div>
<div class="sk-article-line" style="width: 95%"></div>
<div class="sk-article-line" style="width: 90%"></div>
<div class="sk-article-line" style="width: 60%"></div>
</div>.sk-article {
width: 220px;
display: flex;
flex-direction: column;
gap: 7px;
}
.sk-article-hero,
.sk-article-h1,
.sk-article-by,
.sk-article-line {
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skShimmer 1.6s linear infinite;
border-radius: 5px;
}
.sk-article-hero {
height: 60px;
border-radius: 8px;
margin-bottom: 6px;
}
.sk-article-h1 {
height: 14px;
width: 80%;
margin-bottom: 2px;
}
.sk-article-by {
height: 9px;
width: 45%;
margin-bottom: 6px;
}
.sk-article-line {
height: 8px;
}
@keyframes skShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-article,
.sk-article * {
animation: none !important;
}
}
.sk-article {
width: 220px;
display: flex;
flex-direction: column;
gap: 7px;
}
.sk-article-hero,
.sk-article-h1,
.sk-article-by,
.sk-article-line {
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skShimmer 1.6s linear infinite;
border-radius: 5px;
}
.sk-article-hero {
height: 60px;
border-radius: 8px;
margin-bottom: 6px;
}
.sk-article-h1 {
height: 14px;
width: 80%;
margin-bottom: 2px;
}
.sk-article-by {
height: 9px;
width: 45%;
margin-bottom: 6px;
}
.sk-article-line {
height: 8px;
}
@keyframes skShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-article,
.sk-article * {
animation: none !important;
}
}