skeleton shimmer loading placeholder motion soften loading placeholders on content-heavy pages replace harsh default skeleton shimmer reuse across cards, rows, and page skeletons skeleton loaders feel too flashy loading motion overpowers the page placeholder sweeps need a calmer visual profile
Skeleton Shimmer Soft
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/skeleton-shimmer-soft.json Background
Customize
Quick Start
<div class="skeleton-shimmer-soft rounded-xl h-4 w-full"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 756 bytes · 31 lines
- Custom Properties
-
--skeleton-base--skeleton-peak--skeleton-duration - Classes
-
.skeleton-shimmer-soft
skeleton shimmer loading placeholder motion
Apply .skeleton-shimmer-soft to any placeholder block. It works best on larger loading surfaces where a quieter shimmer is easier to live with than a bright, high-contrast sweep.