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;
}
}