Skeleton page

Skeleton pages are a useful pattern for pages where there is a lot of content that may be slow to load. The goals of a skeleton page are to hold the layout, while communicating to the user that content is being fetched and loaded.

#Pattern structure

Abstracted images
Abstracted text

#Pattern interactions

As the content loads, images and text are abstracted into basic shapes. By adding a pulsing animation, this communicates to the user that content is being loaded and the system is responding.

#Accessibility

If users prefer reduced motion, then cancel out the animation by using the media query: @media screen and (prefers-reduced-motion: reduce) {}