Question 1

What is a CSS skeleton loader?

Accepted Answer

A skeleton loader is a placeholder that mimics the shape of loading content using animated gray shapes. It's used while data is fetching to prevent layout shift and reduce perceived wait time. The animation is typically a shimmer gradient sliding across the shapes: background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%) with animated background-position.

Question 2

How do I create a shimmer animation for skeleton loading?

Accepted Answer

Use @keyframes to animate background-position on a large gradient: @keyframes shimmer { to { background-position: -200% center; } } .skeleton { background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%); background-size: 200%; animation: shimmer 1.5s infinite; }

CSS Skeleton Loader Generator

Live Preview

Generated Code

Related Tools