Skeleton Loading

Gives user an idea of what content is loading.

Overview

Skeleton loading components allow you to create components that resemble the content being loaded. This gives users an idea of what to expect, and prevents screen jump by having accurately sized placeholders while content loads.

Skeleton loaders are generally preferred over spinners, as they shift the user's focus to the content being loaded, rather than the feeling of waiting.

Usage


Edit live code
<Card>
  <SkeletonHeading />
  <SkeletonText lines={3} />
  <SkeletonCircle />
  <SkeletonCTA />
</Card><Card>
  <SkeletonHeading />
  <SkeletonText lines={3} />
  <SkeletonCircle />
  <SkeletonCTA />
</Card>

Variations

Heading

Use the SkeletonHeading to resemble a heading. Uses the underlying heading component for size and margins.


Edit live code
<SkeletonHeading headingComponent={Heading2} size="90%" /><SkeletonHeading headingComponent={Heading2} size="90%" />

Properties

Name	Values	Default
size	string	70%
headingComponent	ComponentTypeString	Heading3
...	JSX.IntrinsicElements["div"]

Text

Use the SkeletonText to resemble a multi-line paragraph, the last line will be shorter than the rest.


Edit live code
<SkeletonText lines={6} /><SkeletonText lines={6} />

Properties

Name	Values	Default
lines	number	1
...	JSX.IntrinsicElements["p"]

Call to action

Use the SkeletonCTA to resemble a Call to action.


Edit live code
<SkeletonCTA size="20rem" /><SkeletonCTA size="20rem" />

Properties

Name	Values	Default
size	string	25rem
...	JSX.IntrinsicElements["div"]

Circle

Use the SkeletonCircle to resemble an image or icon.


Edit live code
<SkeletonCircle size="20rem" /><SkeletonCircle size="20rem" />

Properties

Name	Values	Default
size	string	12rem
...	JSX.IntrinsicElements["div"]

Custom

The Skeleton component includes the basic styles needed to add the "gleam" effect to custom Skeleton components.


Edit live code
<Skeleton style={{width: 200, height: 40, background: 'peachpuff'}} /><Skeleton style={{width: 200, height: 40, background: 'peachpuff'}} />