CSS
.sk-card {
width: 220px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 10px;
background: #15151b;
}
.sk-card-img,
.sk-card-title,
.sk-card-line {
background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
background-size: 200% 100%;
animation: skShimmer 1.6s linear infinite;
border-radius: 6px;
}
.sk-card-img {
aspect-ratio: 16 / 9;
margin-bottom: 4px;
}
.sk-card-title {
height: 14px;
width: 70%;
}
.sk-card-line {
height: 9px;
}
@keyframes skShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-card,
.sk-card * {
animation: none !important;
}
}