← All elements
<div class="sk"><div class="av"></div><div class="ln w1"></div><div class="ln w2"></div><div class="ln w3"></div></div>About this loader
A placeholder card that shimmers with a moving gradient, ideal while real content is loading.
How it works
The placeholder shapes use a wide linear-gradient with a lighter band in the middle, sized to 300 percent of the element. A keyframe animation moves background-position across them, which makes the light band sweep over every bar and the avatar in step, hinting that content is loading.
Ways to customise it
- Change the grey values in the gradient to suit dark or light themes.
- Adjust the width classes to match your real content layout.
- Change the animation duration for a faster or slower sweep.
Good to know
A prefers-reduced-motion rule turns the animation off. Skeletons are decorative, so mark the real region with aria-busy while loading. Replace them with the real content as soon as it arrives.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.