Skeleton
A shimmering placeholder while content loads.
A skeleton is one line tall by default. Set a width or height for other shapes,
and .rounded for a pill or a circle. Hide it from screen readers
with aria-hidden="true" and give the region a label that says it
is loading.
The shimmer stops when the user prefers reduced motion.
Variables
| Variable | Default |
|---|---|
--i-skeleton-durationOne shimmer sweep | 1.5s |
--i-skeleton-color-background | color-mix(in oklab, var(--i-color-text) 10%, var(--i-color-background)) |
--i-skeleton-color-highlight | color-mix(in oklab, var(--i-color-text) 4%, var(--i-color-background)) |