
Skeletons & Progress
CSS Skeleton Loader Without Layout Shift
Build a CSS skeleton loader on the same grid as the final component, reserving media with `aspect-ratio` and text regions with realistic minimum dimensions.
Different waits deserve different feedback. Skeletons preview layout, progress bars report measurable completion, and compact indicators acknowledge shorter indeterminate tasks. The examples reserve real space and connect visuals to application state. A gray rectangle is not a loading strategy merely because it has acquired a shimmer.

Build a CSS skeleton loader on the same grid as the final component, reserving media with `aspect-ratio` and text regions with realistic minimum dimensions.