<div class="card-skeleton">
<div class="skeleton-image"></div>
<div class="skeleton-text"></div>
</div>
.card-skeleton {
width: 300px;
height: 200px;
background: #f0f0f0;
border-radius: 8px;
animation: shimmer 1.5s infinite;
}
.skeleton-image {
width: 100%;
height: 60%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.skeleton-text {
width: 80%;
height: 10px;
margin: 10px auto;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}