Skeleton

Skeleton holds the shape of content with soft placeholder blocks while it loads. It has three shapes, an optional shimmer, and no script.

Public web API

One hook per placeholder, an optional shape, and an optional shimmer on any ancestor.

<div aria-busy="true" data-bitsy-skeleton-shimmer>
  <span role="status" class="u-visually-hidden">Loading members</span>
  <span data-bitsy-skeleton data-bitsy-shape="circle" aria-hidden="true"></span>
  <span data-bitsy-skeleton aria-hidden="true" style="--bitsy-skeleton-width: 40%"></span>
</div>

Placeholders are aria-hidden; one role="status" announces the load.
Remove aria-busy when the real content arrives.
The shimmer stops under reduced motion.

Shapes and states

List row, static

List row, shimmer

Card with image block

Foundation versus Bit

The foundation has no placeholder shape or shimmer. Use Skeleton when the layout is known; use a spinner when it is not. Preset Card and Table skeletons are Patterns.