Back to Snippets

Advanced CSS Skeleton Loader

Improve perceived performance with this advanced skeleton loader. Unlike simple grey boxes, this snippet uses a shimmering gradient animation that mimics the content flow, so users know exactly what to expect while waiting.

420

#css

#skeleton

#loading #animation

#shimmer

#performance

#ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

.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