The optimistic loading state: structure first, content on arrival.
| Prop | Type | Notes |
|---|---|---|
| variant | line · circle · box | The primitive shape |
| width / height | number | string | Match the real element it stands in for |
| shimmer | boolean | The sweeping highlight; on by default |
| count | number | Repeat lines for a text block |
| reduced-motion | — | Drops the shimmer, keeps the shape |
Use a Skeleton when you know the shape of what's loading. For an unmeasurable or shapeless wait use a Loader; for measurable work use Progress.
Vary line widths so the block reads like real paragraphs.
Don't make every line full-width. It reads as a solid block.
Mirror the real layout so nothing jumps when content lands.
Don't use a lone spinner where the shape is known. Show structure.
Media cards while the image and title load.
Repeated rows for a loading list or table.
Article and detail views before the copy arrives.
| Token | Value | Role |
|---|---|---|
| --skel-bg | #16171B | Placeholder fill |
| --skel-shimmer | rgba(255,255,255,.055) | Sweeping highlight |
| --skel-speed | 1.4s | Shimmer period |
| --skel-line-h | 11px | Default line height |
| --skel-radius | 5px line · 9px box | Corner per shape |
| --skel-reduced | no shimmer | Reduced-motion fallback |
<div class="o-skel o-skel--line" style="width:40%"></div> <div class="o-skel o-skel--line"></div> <div class="o-skel o-skel--line" style="width:78%"></div> <div class="o-skel o-skel--circle" style="width:40px;height:40px"></div>