Skeleton

Status: Available View in Storybook

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.

Types

Text Lines

Text line skeleton example

Circle List

Circle list skeleton example

Header Group

Header Group skeleton example

Circle Detail Group

Circle Detail Group skeleton example

Tabs

Tabs skeleton example

Table

Table skeleton example

Custom

Custom circle skeleton example
Custom headline skeleton example
Custom text skeleton example

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.

 

For pages with titles that are hard-coded, such as a landing page for claims, display the page title outside of the skeleton
For pages with titles that are dependent on the loaded information, such as providing how many search results, use a skeleton to represent the page title

Text Lines

Use for text items, such as:

  • List of links
  • Vertical navigation
  • List of expansion elements
  • Supporting detail text

 

Use for vertical navigation

Circle List

Use for simple lists that include a graphic, such as an avatar or icon

Header Group

Use for repeated items that have a description

Circle Detail Group

Use for more detailed items that contain a graphic, such as an avatar or icon, and supporting detail

Tabs

Use for tabs or similar horizontally placed elements

Table

Use to represent tabular data

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.

The wrapper has 32px padding and a 16px bottom margin
On mobile, wrapper padding is 16px
Skeletons can be displayed outside of the wrapper. This doesn't include any built-in margins and should follow spacing alignment with other content on the page.
When Circle List, Header Group, Circle Detail Group, and Table have more than five items, the last two in the set will fade

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.

These would be a custom skeleton
Represent any horizontal elements with three tabs
Tables should be represented with six rows

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.

↑ Back to top