Advanced CSS Skeleton Loader (Code Snippet)

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

Advanced CSS Skeleton Loader

Share Code Snippet