Placeholders
Skeleton stand-ins for content that hasn't loaded yet.
Basic
Apply .placeholder to any inline element and size it with a width utility or inline style; the fill is a muted gray by default. Wrap the loading region in aria-hidden="true" so the skeleton is skipped by assistive tech. Add .placeholder--glow for a pulse or .placeholder--wave for a shimmer. Stack a few bars of varying width to stand in for lines of text.
Colors
The default is a neutral muted gray. Set --placeholder-bg to tint a bar to any token.
Animated
--glow fades the bar in and out; --wave sweeps a highlight across it. They're modifiers on the bar, so put the class on each bar you want animated. Both stop under reduced motion.
Sizes
The bar height tracks its font-size (1em); --sm and --lg shrink or grow it.
Composed
Combine bars with width and shape utilities to skeleton a whole component, such as a media row with a round avatar.
Customization
These variables retune a placeholder bar. Override on the bar or any wrapper.
| Variable | Use |
|---|---|
--placeholder-height | Bar height (font-relative; the size modifiers retune it) |
--placeholder-bg | Fill color |
--placeholder-opacity | Fill opacity |
--placeholder-radius | Corner radius |