<div class="sk-card">
<div class="sk-header">
<div class="sk-avatar sk-pulse"></div>
<div class="sk-meta">
<div class="sk-line sk-w-50 sk-pulse"></div>
<div class="sk-line sk-w-30 sk-pulse"></div>
</div>
</div>
<div class="sk-content">
<div class="sk-line sk-w-100 sk-pulse"></div>
<div class="sk-line sk-w-100 sk-pulse"></div>
<div class="sk-line sk-w-75 sk-pulse"></div>
</div>
</div>
.sk-card {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 16px;
padding: 24px;
width: 300px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.sk-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.sk-pulse {
background: #e5e7eb;
background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
.sk-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.sk-meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.sk-line {
height: 12px;
}
.sk-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.sk-w-30 { width: 30%; }
.sk-w-50 { width: 50%; }
.sk-w-75 { width: 75%; }
.sk-w-100 { width: 100%; }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}