Back to CSS Skeleton Loaders Pulse Block Pure CSS
Share
HTML
<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>
CSS
.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;
  }
}