Skeleton
Placeholders that shimmer while content loads; static under reduced motion.
Examples
Skeleton
Anatomy
.skeleton | A block placeholder, at least 1em tall. Size it like the content it stands in for, or put placeholder text in it: the text sets the size and stays invisible. |
Accessibility
- Hide skeletons with
aria-hidden="true"on their wrapper, as in the demo. - Mark the region that is loading
aria-busy="true", and clear it when the content arrives. - Skeletons ignore the pointer and are hidden in print.