Shimmer skeleton card
A placeholder post with avatar, image and text lines, while a band of light sweeps across it.
Settings
Code
<div class="ul-sk"><div class="ul-sk-h"><i class="a"></i><div><i></i><i class="s"></i></div></div><i class="img"></i><i></i><i class="s"></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
The shimmer effect, a soft band of light sliding across grey shapes, is what most people now associate with “content on its way”. This CSS skeleton loader is shaped like a social post, with author, image and text, so it fits a community feed, the article list of a news site or a recipe blog’s latest posts.
Because it is plain HTML and CSS, it works on static and server-rendered sites too, before any JavaScript runs. Keep the highlight color only slightly lighter than the base; a bright flash across every card gets tiring when a whole page is loading.