<div class="shimmer-card">
<div class="shimmer-card__shine"></div>
<div class="shimmer-card__content"></div>
</div>
<style>
.shimmer-card {
position: relative;
width: 220px;
height: 120px;
border-radius: 16px;
background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.98));
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.shimmer-card__shine {
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.25) 40%, transparent 70%);
transform: translateX(-120%);
animation: shimmer 1.6s ease-in-out infinite;
}
.shimmer-card__content {
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.96));
}
@keyframes shimmer {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
</style>