Home / Motion / Skeleton Loaders
Skeleton Loaders CSS Template, Free with Live Demo
Free skeleton loader template for a news app. Grey shimmer placeholders show while content loads, then real stories fade in. Pure CSS shimmer. Live demo. The example is Morning Brief, a news app.
What is skeleton loaders?
A skeleton loader shows grey boxes in the shape of the content while it is loading. People see the layout right away, so waiting feels shorter than staring at a spinner.
The shimmer is a light band inside a wide gradient that slides across each box. When the data arrives, the skeletons are swapped for the real stories with a quick fade.
Good for
- News and social feeds
- Dashboards that fetch data
- Online shop product grids
- Any page that loads from an API
What you get in this template
- Skeleton cards that match the real layout
- Shimmer made with one moving gradient
- Real content fades in after loading
- aria-busy tells screen readers it is loading
- Reload button to see it again
The key CSS
This is the part that makes the skeleton loaders look work. Copy it into your own project.
.sk {
background: linear-gradient(90deg, #e7e7e4 0 30%, #f3f3f1 50%, #e7e7e4 70%) 0 0 / 300% 100%;
animation: shim 1.3s linear infinite;
border-radius: 6px;
}
@keyframes shim {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is a skeleton screen?
It is a placeholder version of the page, made of grey shapes, shown while the real content loads.
Are skeleton loaders better than spinners?
For content like feeds and cards, yes. They show the layout early and make loading feel faster.
How do I use this with real data?
Show the skeleton, fetch your data, then replace the skeleton with the real cards when the request finishes.
More Motion designs
061. Scroll Driven Animation
Volt Ride, an e-bike product page
062. View Transitions
Fork and Field, a recipe site
063. Micro Interactions
Streak, a habit tracker
064. Layered Parallax
Pinecrest, a campground
065. Marquee Ticker
Northline, a design studio
066. Morphing Blobs
Bloom, a therapy practice
067. Hover Reveal
Studio Halden, an interior design studio
068. Staggered Entrance
Pipeline, a CRM landing page