Skeleton
Placeholder block standing in for content that has not arrived, in three shapes and three animations.
c2-skeleton holds the shape of content while it loads. Three variants cover almost everything: rect (the default) for images, cards and buttons, text for copy — lines repeats it with a shorter last line, the way a paragraph ends — and circle for avatars. The animation is a pulse by default, wave for a highlight sweeping across the block, or none for a still one; reduced motion stops all three. A skeleton is decoration, so it stays out of the accessibility tree unless you give it a label.
Installation
npm install @c2n/skeletonUsage
Build a skeleton that traces the layout it replaces — same number of blocks, roughly the same sizes, in the same places — and swap the whole thing for the real content when it arrives. A placeholder that does not match what follows reads as a jump rather than a load.
Mark the region aria-busy="true" while it waits. The blocks themselves are aria-hidden, because a screen reader announcing a row of empty boxes helps nobody; give one skeleton in the group a label and it becomes a role="status" that announces the wait once. Leave the rest unlabelled.
--c2-skeleton--width and --c2-skeleton--height size a rect and set the line height of a text skeleton; a circle ignores both and uses --c2-skeleton__circle--size so it cannot go oval in a container that is not square. --c2-skeleton--background-color is the block, --c2-skeleton__sheen--color the highlight a wave sweeps across it, and --c2-skeleton--animation-duration the pace of either animation — on a dark surface set the first to a lighter grey and the second to a much fainter white.