Patterns Easy
Skeleton Loading Effect
Animated skeleton placeholder with shimmer pulse — smooth loading state for cards and content blocks.
Open in Lab
MCP
css
Targets: JS HTML
Code
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: #0f172a;
color: #e2e8f0;
font-family: system-ui, sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.demo {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
padding: 2rem;
}
/* Skeleton shimmer */
.skeleton {
background: #1e293b;
border-radius: 6px;
position: relative;
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 50%,
transparent 100%
);
animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Card skeleton */
.skeleton-card {
width: 280px;
background: #1a2332;
border-radius: 14px;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.skeleton-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-avatar--sm {
width: 32px;
height: 32px;
}
.skeleton-meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.skeleton-line {
height: 12px;
border-radius: 6px;
}
.skeleton-line--sm {
height: 9px;
}
.skeleton-image {
width: 100%;
height: 140px;
border-radius: 10px;
margin-bottom: 1rem;
}
.skeleton-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
}
.skeleton-footer {
display: flex;
gap: 0.5rem;
}
.skeleton-btn {
height: 32px;
border-radius: 8px;
}
/* List skeleton */
.skeleton-list {
width: 260px;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.skeleton-list-item {
display: flex;
align-items: center;
gap: 0.75rem;
background: #1a2332;
border-radius: 12px;
padding: 0.75rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.skeleton-list-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
@media (prefers-reduced-motion: reduce) {
.skeleton::after {
animation: none;
}
}// Skeleton loading is CSS-only — no JS required.
// This file is included for consistency with the snippet structure.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skeleton Loading Effect</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo">
<!-- Skeleton card -->
<div class="skeleton-card">
<div class="skeleton-header">
<div class="skeleton skeleton-avatar"></div>
<div class="skeleton-meta">
<div class="skeleton skeleton-line" style="width: 60%;"></div>
<div class="skeleton skeleton-line skeleton-line--sm" style="width: 40%;"></div>
</div>
</div>
<div class="skeleton skeleton-image"></div>
<div class="skeleton-body">
<div class="skeleton skeleton-line" style="width: 100%;"></div>
<div class="skeleton skeleton-line" style="width: 85%;"></div>
<div class="skeleton skeleton-line" style="width: 70%;"></div>
</div>
<div class="skeleton-footer">
<div class="skeleton skeleton-btn" style="width: 80px;"></div>
<div class="skeleton skeleton-btn" style="width: 60px;"></div>
</div>
</div>
<!-- Skeleton list -->
<div class="skeleton-list">
<div class="skeleton-list-item">
<div class="skeleton skeleton-avatar skeleton-avatar--sm"></div>
<div class="skeleton-list-text">
<div class="skeleton skeleton-line" style="width: 75%;"></div>
<div class="skeleton skeleton-line skeleton-line--sm" style="width: 50%;"></div>
</div>
</div>
<div class="skeleton-list-item">
<div class="skeleton skeleton-avatar skeleton-avatar--sm"></div>
<div class="skeleton-list-text">
<div class="skeleton skeleton-line" style="width: 65%;"></div>
<div class="skeleton skeleton-line skeleton-line--sm" style="width: 45%;"></div>
</div>
</div>
<div class="skeleton-list-item">
<div class="skeleton skeleton-avatar skeleton-avatar--sm"></div>
<div class="skeleton-list-text">
<div class="skeleton skeleton-line" style="width: 80%;"></div>
<div class="skeleton skeleton-line skeleton-line--sm" style="width: 55%;"></div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Skeleton Loading Effect
Animated skeleton placeholder with shimmer gradient. Reference patterns from loading-skeleton and ai-thinking-loader.
Features
- CSS-only shimmer animation (no JS required)
- Card skeleton with avatar, title, text, and image placeholders
- Customizable via CSS custom properties
prefers-reduced-motionrespected