12 CSS Skeleton Loaders 01 / 12
Classic Shimmer
A diagonal gradient slides left-to-right across each placeholder bar — the most-recognised skeleton style, used by LinkedIn, Facebook, and Slack.
The code
<div class="sk-classic"> <div class="sk-bar" style="width: 70%"></div> <div class="sk-bar" style="width: 90%"></div> <div class="sk-bar" style="width: 60%"></div> </div>
<div class="sk-classic">
<div class="sk-bar" style="width: 70%"></div>
<div class="sk-bar" style="width: 90%"></div>
<div class="sk-bar" style="width: 60%"></div>
</div>.sk-classic {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-bar {
height: 12px;
border-radius: 6px;
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skClassic 1.4s linear infinite;
}
@keyframes skClassic {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-classic,
.sk-classic * {
animation: none !important;
}
}
.sk-classic {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-bar {
height: 12px;
border-radius: 6px;
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skClassic 1.4s linear infinite;
}
@keyframes skClassic {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-classic,
.sk-classic * {
animation: none !important;
}
}