@ebay/skin/skeleton BETA
A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the progress spinner in many situations.
A skeleton is appropriate as a placeholder for content in cases where a service or action may be slow to resolve.
A skeleton is NOT appropriate as a placeholder for content if rendering that content or placeholder would cause unexpected page layout shift (see below for more details).
Cumulative Layout Shift (CLS)
It is the developer's responsibility to ensure the CLS metric of a page is not negatively impacted by the introduction of a skeleton placeholder; a poor CLS score will occur whenever content shifts unexpectedly . Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content. Skeletons can help mask these problems if they reserve the correct amount of physical space, but can compound the problem when they do not.
The Skeleton Use Guide illustrates various techniques for implementing skeletons across some common loading scenarios.
Skeleton Types
| Skeleton | Default | On-Secondary | Purple | Green | Blue |
|---|---|---|---|---|---|
| Avatar | |||||
| Button | |||||
| Textbox | |||||
| Image | |||||
| Text |
On large screens, skeleton loaders use a solid fill for background color; on small screens, a shimmer is applied.
The color can be changed to purple, green or blue by applying the appropriate modifier, e.g. skeleton--green . View the composite skeletons examples for further details.
Avatar Skeleton
Use the skeleton__avatar class to create a skeleton placeholder for an avatar.
Button Skeleton
Use the skeleton__button class to create a skeleton placeholder for the default button shape.
Use the small modifier to match the shape of a small button.
Use the large modifier to match the shape of a large button.
Textbox Skeleton
Use the skeleton__textbox class to create a skeleton placeholder for a textbox.
Image Skeleton
Use the skeleton__image class to create a skeleton placeholder for an image.
Notice that the height and width must be set on the skeleton__image element.
Text Block Skeleton
Use the skeleton__text class to create a skeleton for a single block of text.
Use the skeleton__text--large modifier to match the shape of a large block of text.
Use the skeleton__text--multiline mofifier to create a skeleton for two lines of text.
Composite Skeleton
Combinations of skeletons can form a custom placeholder for more complex content, such as a typical eCommerce item tile in the example below.
Here is a skeleton for a compact user profile. Notice that a div tag can be replaced with a span tag for inline-block layout of elements.
Skeleton Variables EXPERIMENTAL
The following custom properties (aka CSS Variables) are available for component-level overrides and other general theming purposes.
- --skeleton-background