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