Skeleton Preview
A skeleton lets people know that a section of content is loading without blocking other parts of the page.
Skeletons are great for hinting at the structure of information in a layout. Use them to gradually load content that takes longer than a second. If you don’t know the structure, try a progress bar or spinner. Skeletons let people know something is happening, but not how long until it’s done. Avoid them for long processes.
Resources
Behavior
Skeletons have two animation styles, wave and pulse. Wave is the default animation and provides the smoothest transition. In most cases, especially those with a lot of skeletons on screen at once, stick with wave for a fluid experience.
Whenever possible, make simultaneous calls for data to avoid staggered loading. If a staggered load is unavoidable, make sure the skeleton animations stay in sync. Otherwise, the experience may start to feel busy and fragmented.
Layout
Communicate what’s essential
Use skeletons to prep people for new data. Don’t use them for fixed parts of a layout, like tabs in an app bar.
When loading dynamic components with variable final content, use the skeleton to communicate consistent, high-level information. Most importantly, keep it simple. For example, if loading a persona, the skeleton should reflect an avatar, a title, and a subtitle. There’s no need to reflect specifics, like a presence badge, even if they’re present in the loaded content
Accessibility
Focusable components
If a loading component is focusable and showing skeleton content, make sure to include an accessible name or label to communicate that it’s loading. After content is loaded, ensure that keyboard focus doesn’t get disrupted.
Live regions and aria-busy
For larger or more important blocks of skeleton content, consider implementing a live region (aria-live) to inform screen readers when the content is finished loading. Live regions can become disruptive if used incorrectly, so be sure that aren’t too many live regions and set the appropriate politeness level to avoid constantly interrupting the screen reader announcements.
If you have multiple skeletons in a live region but aren’t sure they will update simultaneously, try aria-busy. You can set aria-busy to true to make screen readers wait until all content is loaded before making an announcement. Once the content is loaded, set aria-busy to false to let screen readers know content is ready.