Instant CSS
Tools
Templates
Components
Learn
More
Skeleton Shimmer
Animation
Loading placeholder with a shimmering gradient.
Reset to Default
HTML
Copy HTML
<div class="skeleton"> <div class="line"></div> <div class="line short"></div> <div class="line"></div> </div>
CSS
Copy CSS
.skeleton { width: 280px; display: flex; flex-direction: column; gap: 10px; } .skeleton .line { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; } .skeleton .line.short { width: 60%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.