12 CSS Skeleton Loaders 02 / 12
Pulse Block
A simple opacity pulse — minimal, GPU-friendly, and the default style used by the Tailwind animate-pulse utility class.
The code
<div class="sk-pulse"> <div class="sk-pulse-bar" style="width: 80%"></div> <div class="sk-pulse-bar" style="width: 60%"></div> <div class="sk-pulse-bar" style="width: 70%"></div> </div>
<div class="sk-pulse">
<div class="sk-pulse-bar" style="width: 80%"></div>
<div class="sk-pulse-bar" style="width: 60%"></div>
<div class="sk-pulse-bar" style="width: 70%"></div>
</div>.sk-pulse {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-pulse-bar {
height: 12px;
border-radius: 6px;
background: #2a2a36;
animation: skPulse 1.5s ease-in-out infinite;
}
@keyframes skPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-pulse,
.sk-pulse * {
animation: none !important;
}
}
.sk-pulse {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
}
.sk-pulse-bar {
height: 12px;
border-radius: 6px;
background: #2a2a36;
animation: skPulse 1.5s ease-in-out infinite;
}
@keyframes skPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-pulse,
.sk-pulse * {
animation: none !important;
}
}