Placeholder
Loading placeholders — “skeletons” — for content that is still loading. Size them, give them a column width, and optionally animate them with a glow or wave sweep.
Import
import { Placeholder, PlaceholderGlow, PlaceholderWave } from '@metatoy/bootstrap-styled';Sizes
size sets the height of the shimmer bar — xs, sm, the default, or lg.
Column widths
col (1–12) sets the width as a fraction of twelve, mirroring the grid. Combine several
to sketch a paragraph or a heading + body.
Glow animation
Wrap placeholders in PlaceholderGlow to pulse their opacity while content loads.
Wave animation
PlaceholderWave instead sweeps a shimmering highlight across the placeholders.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "lg" | "xs" | — | Bootstrap `.placeholder-xs/-sm/-lg` — min-height of the shimmer bar. |
| col | number | — | Grid column width (1–12) → `width: (col / 12) * 100%`, like `.col-{n}`. |
| as | React.ElementType | — | — |
Placeholder also accepts as (render as a different element) and all native
attributes of the element it renders. PlaceholderGlow and PlaceholderWave are styled
wrappers that take as plus native <div> attributes.
Theming
Placeholders paint with currentColor at reduced opacity, so they inherit the text
color of their context — set color (or a color utility) on the placeholder or an
ancestor to tint them. The glow and wave animations are pure CSS keyframes on the wrapper
and need no tokens.
Accessibility
Placeholders are purely visual and convey no text to assistive tech. Communicate loading
state programmatically instead — e.g. set aria-hidden="true" on the placeholders and
expose the loading status on the region with aria-busy="true" (and an
aria-live / status message) so screen-reader users are told content is loading rather
than encountering empty bars. Respect reduced-motion preferences for the animated
variants.