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
Variations
Heading
Use the SkeletonHeading to resemble a heading. Uses the underlying heading component for size and margins.
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.
Properties
| Name | Values | Default |
|---|---|---|
lines | number | 1 |
... | JSX.IntrinsicElements["p"] |
Call to action
Use the SkeletonCTA to resemble a Call to action.
Properties
| Name | Values | Default |
|---|---|---|
size | string | 25rem |
... | JSX.IntrinsicElements["div"] |
Circle
Use the SkeletonCircle to resemble an image or icon.
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.