12 CSS Skeleton Loaders 10 / 12
Gradient Glow
A soft brand-coloured gradient sweeps through each bar — a more decorative shimmer that fits hero sections and marketing pages.
The code
<div class="sk-glow"> <div class="sk-glow-bar" style="width: 90%"></div> <div class="sk-glow-bar" style="width: 70%"></div> <div class="sk-glow-bar" style="width: 80%"></div> </div>
<div class="sk-glow">
<div class="sk-glow-bar" style="width: 90%"></div>
<div class="sk-glow-bar" style="width: 70%"></div>
<div class="sk-glow-bar" style="width: 80%"></div>
</div>.sk-glow {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-glow-bar {
height: 14px;
border-radius: 7px;
background: linear-gradient(
90deg,
#1a1a22 0%,
rgba(124, 108, 255, 0.35) 30%,
rgba(255, 108, 138, 0.35) 60%,
#1a1a22 100%
);
background-size: 200% 100%;
animation: skGlow 1.8s linear infinite;
}
@keyframes skGlow {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-glow,
.sk-glow * {
animation: none !important;
}
}
.sk-glow {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-glow-bar {
height: 14px;
border-radius: 7px;
background: linear-gradient(
90deg,
#1a1a22 0%,
rgba(124, 108, 255, 0.35) 30%,
rgba(255, 108, 138, 0.35) 60%,
#1a1a22 100%
);
background-size: 200% 100%;
animation: skGlow 1.8s linear infinite;
}
@keyframes skGlow {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-glow,
.sk-glow * {
animation: none !important;
}
}