12 CSS Skeleton Loaders 05 / 12
Wave Sweep
A bright highlight strip travels across the placeholder using a CSS mask — adds a glassy "light passing over" feel without changing the base colour.
The code
<div class="sk-wave"> <div class="sk-wave-bar" style="width: 80%"></div> <div class="sk-wave-bar" style="width: 95%"></div> <div class="sk-wave-bar" style="width: 65%"></div> </div>
<div class="sk-wave">
<div class="sk-wave-bar" style="width: 80%"></div>
<div class="sk-wave-bar" style="width: 95%"></div>
<div class="sk-wave-bar" style="width: 65%"></div>
</div>.sk-wave {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-wave-bar {
height: 12px;
border-radius: 6px;
background: #2a2a36;
position: relative;
overflow: hidden;
}
.sk-wave-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 50%,
transparent 100%
);
transform: translateX(-100%);
animation: skWave 1.6s linear infinite;
}
@keyframes skWave {
100% {
transform: translateX(100%);
}
}
@media (prefers-reduced-motion: reduce) {
.sk-wave,
.sk-wave * {
animation: none !important;
}
}
.sk-wave {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-wave-bar {
height: 12px;
border-radius: 6px;
background: #2a2a36;
position: relative;
overflow: hidden;
}
.sk-wave-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 50%,
transparent 100%
);
transform: translateX(-100%);
animation: skWave 1.6s linear infinite;
}
@keyframes skWave {
100% {
transform: translateX(100%);
}
}
@media (prefers-reduced-motion: reduce) {
.sk-wave,
.sk-wave * {
animation: none !important;
}
}