shimmer skeleton loading placeholder sweep skeleton loading placeholder for cards content loading state for text blocks shimmer effect on image placeholders blank loading states feel broken need animated skeleton without JS want shimmer sweep loading indicator
Shimmer
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/shimmer.json Loading skeleton with moving highlight sweep.
Background
Customize
Quick Start
<div class="shimmer h-4 w-48"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 663 bytes · 31 lines
- Custom Properties
-
--shimmer-color--shimmer-bg--shimmer-speed - Classes
-
.shimmer
shimmer skeleton loading placeholder sweep
A shimmer sweep effect for loading skeleton placeholders. Apply to any element to create a light sweep animation indicating content is loading.
Skeleton card with shimmer
<div class="space-y-3 rounded-xl border border-slate-200 p-6">
<div class="shimmer h-4 w-3/4"></div>
<div class="shimmer h-4 w-1/2"></div>
<div class="shimmer h-24 w-full"></div>
</div>