Pure CSS Skeleton Loaders — Shimmer
Flat neutrals, dark‑mode aware, zero JS. Use .skeleton on blocks; adjust size with utility classes.
2) Media object
3) Repeating list
4) Product tile
5) Article
6) Table
7) Profile header
8) Bar chart
9) Two-column
10) Action row
Usage: Wrap any block with .skeleton. For text lines, use .line plus width helpers. Respect motion with prefers-reduced-motion already built in.
Tip: When real data arrives, swap the skeleton block for real content using a conditional class (e.g., .is-loading).