Loaders
Skeleton Loading Animation
Staggered skeleton placeholder bars that pulse while content loads. Free CSS, no framework.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.skeleton {
transform: translate3d(0px, 0px, 0);
transform-origin: 240px 160px;
}
.skeleton-bar-1 {
transform: translate3d(120px, 125px, 0);
width: 240px;
height: 14px;
background: #2a2e3d;
border-radius: 7px;
animation: skeleton-bar-1-anim 1400ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes skeleton-bar-1-anim {
0% {
opacity: 1;
animation-timing-function: ease-in-out;
}
50% {
opacity: 0.35;
animation-timing-function: ease-in-out;
}
100% {
opacity: 1;
}
}
.skeleton-bar-2 {
transform: translate3d(120px, 153px, 0);
width: 190px;
height: 14px;
background: #2a2e3d;
border-radius: 7px;
animation: skeleton-bar-2-anim 1400ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes skeleton-bar-2-anim {
0% {
opacity: 0.8;
animation-timing-function: ease-in-out;
}
62% {
opacity: 0.35;
animation-timing-function: ease-in-out;
}
100% {
opacity: 0.8;
}
}
.skeleton-bar-3 {
transform: translate3d(120px, 181px, 0);
width: 140px;
height: 14px;
background: #2a2e3d;
border-radius: 7px;
animation: skeleton-bar-3-anim 1400ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes skeleton-bar-3-anim {
0% {
opacity: 0.6;
animation-timing-function: ease-in-out;
}
74% {
opacity: 0.3;
animation-timing-function: ease-in-out;
}
100% {
opacity: 0.6;
}
}
@media (prefers-reduced-motion: reduce) {
.skeleton-bar-1,
.skeleton-bar-2,
.skeleton-bar-3 {
animation: none;
transition: none;
}
}Why it is built this way
The three bars share one animation but start at different points, which reads as a wave rather than three things blinking in unison. Opacity is the only property changing, so the browser never re-lays-out the page while your real content is still loading.
What it animates
1 property across 1 CSS declaration on 3 elements. The bar shows when each one is moving.
opacityWhat it costs to run
Opacity is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 1.40s across 3 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a plain box. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — opacity moves over 1.40s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.