Skeleton
Placeholder shimmer for content loading states. Variants: text line, circular (avatar), rectangular (image/card). Compose to mirror the final layout. Use when content will arrive in under 1 second; longer waits need explicit progress feedback.
a11y (built in): skeletons are decoration, not content — CSS only, no controller, no role and no live region, and every one here is marked aria-hidden="true" (put it on the .lb-skeleton-lines wrapper to hide a whole group with one attribute), so the shimmer never reaches the accessibility tree. Announce the wait itself on the region that will receive the content.
Usage: Each shape modifier carries its own intrinsic size — --text is 1em tall and full-width, --circular a fixed 2.5rem, --rectangular 8rem tall — so shape widths on the container or with per-line inline width, as the demo's shortened 80%/60% lines do. Wrap stacked text lines in .lb-skeleton-lines for block display and consistent gaps. The shimmer is a self-running ::after animation: mount skeletons while loading and swap in the real content yourself — nothing tears them down for you.