← All elements
<div class="sk"><i class="im"></i><i class="l1"></i><i class="l2"></i></div>About this card
A placeholder card with grey blocks that breathe softly while content loads, kinder on the eyes than a shimmer.
How it works
Grey blocks in the shape of an image and two lines share a keyframe that lowers opacity at the midpoint, giving a calm breathing effect instead of a moving shimmer.
Ways to customise it
- Change the greys.
- Add more lines.
- Switch to a dark theme colours.
Good to know
Skeletons should be replaced as soon as content loads. Mark the loading region with aria-busy.
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.