Skeleton
Used to provide a more elegant transition from a loading state to loaded content by indicating to the user a general sense of what type of content will be presented.
Page sections
Types
Text Lines
Circle List
Header Group
Circle Detail Group
Tabs
Table
Custom
Usage
- Use on initial page load or if a majority of the page structure is changing
- Don’t use for every single UI element and instead convey the general types of content that will be shown
- Don’t use for buttons
- When representing lists of data where the number of items isn’t known, use at least six items
- Don’t use for photography, but instead consider a solid background of #CACBCC
- Avoid using for Modals, especially when a limited amount of the data is changing. Use a Spinner instead.
Text Lines
Use for text items, such as:
- List of links
- Vertical navigation
- List of expansion elements
- Supporting detail text
Circle List
Header Group
Circle Detail Group
Tabs
Table
Custom
Use sparingly
While a custom option is available for elements that don't fit into a set type, this option should be sparingly used.
Use when one of the other types cannot communicate the structure of content the skeleton is meant to represent. This includes all the component shapes available to use.
Behavior
- Pages should replace skeleton types with loaded content as it becomes available (known as progressive loading)
- In smaller containers and breakpoints, skeletons adhere to the containing element’s width and proportionally get shorter
- On mobile, Table changes to Header List
Visual style
Each Skeleton type can be displayed in a card-like container (wrapper) or by itself.
Some of the types, like Text Lines, Circle List, Header Group, and Circle Detail Group, allow for repetition within the component.
While types like Header Group and Circle Detail group can be repeated, additional text lines can’t be added.
Custom
Custom gives you access to all skeleton shapes. Use existing spacing as you can and try to avoid:
- Less than 32px below headers
- Less than 24px between text lines
- Less than 24px between circles and text
Accessibility
Skeletons do not need to match AA contrast guidelines. On white, Skeletons have a ratio of 1.62 and on the app background color (#FAFBFC) have a ratio of 1.58.
Skeletons utilize aria-busy, so each implementation of this on a page will give screen reader feedback. Screen readers don’t fully support aria-busy, so “Loading” text is also included. This text isn’t visible, but will be presented to screen readers.