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.


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 skeleton example


Table skeleton example


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


  • 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


Use for tabs or similar horizontally placed elements


Use to represent tabular data


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.


  • 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 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


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