A skeleton provides a simplified, graphical placeholder for content that is not yet available for the client to render; they 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 (after 500ms or so).
+A skeleton is not appropriate as a placeholder for content if that content has unknown dimensions which will cause unexpected page layout shift.
+Skeletons are currently work in progress and in BETA mode. For guidance and appropriate usage, please reachout - the core team.
+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. It can also be compounded when a skeleton has dimensions that do not match the content that it is acting as a placeholder for.
The Skeletons are simplified versions of layouts to indicate that information has not - been fully loaded to improve the perceived performance.
+ +The skeleton examples page illustrates various techniques for implementing skeletons across some common loading scenarios.
+ +| Skeleton type | -default | -elevated | -purple | -green | -blue | +Skeleton | +Default | + +Purple | +Green | +Blue |
@@ -63,11 +70,13 @@
Attention |
+
@@ -91,11 +100,13 @@
Attention |
+
@@ -119,11 +130,13 @@
Attention |
+
@@ -147,11 +160,13 @@
Attention |
+
@@ -171,72 +186,11 @@ Attention |
|---|
By default, the skeleton loaders doesn't convey to screen reader users in a meaningful way. The aria-label - attribute, set to "loading", is utilized to signify the loading state of the - skeleton loader to screen reader users. To prevent the screen reader from repeating the label, the - aria-label attribute should be positioned on the container element. For a better - understanding of this subtlety, please refer to below examples. -
-On larger screens, skeleton loaders use standard fill color in the background where as a shimmer is applied on - smaller screens. An elevated color can be applied by overriding container skeletons with their color classes respectively. For - example, any skeleton shape can inherit elevated background using skeleton--elevated - class.
-Similarly, for AI purposes, respective colors can be applied using skeleton--purple, skeleton--green and skeleton--blue classes. For example, checkout the examples under custom skeletons section.
+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.
-The Skeleton examples shown illustrate when to utilize skeletons - and various techniques for implementing them in different loading scenarios.
- -We've set up CSS properties to provide developers with easy reference for responsive - adjustments of UIs. The CSS properties allow for customization of skeletons for UIs - that require it, but please use them sparingly and be mindful of the impact those overrides can - have.
- -These properties allow for customization of skeletons for UIs that require it, but please use them - sparingly and be mindful of the impact those overrides can have.
-Use the skeleton__avatar class to load a skeleton avatar.
+Use the skeleton__avatar class to create a skeleton placeholder for an avatar.
Use the skeleton__button class, to create a minimal, default skeleton button loader. -
+Use the skeleton__button class to create a skeleton placeholder for the default button shape.
Use the small modifier to decrease the size of the skeleton.
+ +Use the small modifier to match the shape of a small button.
Use the large modifier to increase the size of the skeleton.
+ +Use the large modifier to match the shape of a large button.
Use the skeleton__textbox class, when loading form controls.
+Use the skeleton__textbox class to create a skeleton placeholder for a textbox.
Use the skeleton__image class, while loading images. By default, skeleton image - loader inherits the height and width of the element.
+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.
+ +Use the skeleton__text class, to display content block in a single - row.
+Use the skeleton__text class to create a skeleton for a single block of text.
Use the skeleton__text--large class, to display large content block in a single - row.
+ +Use the skeleton__text--large modifier to match the shape of a large block of text.
Use the skeleton__text--multiline classes, to display content changes in - multiple rows.
+Use the skeleton__text--multiline mofifier to create a skeleton for two lines of text.
A custom tile layout is shown here with image and text content.
+Combinations of skeletons can form a custom placeholder for more complex content, such as a typical eCommerce item tile in the example below.
+To use skeletons inline, replace div with span.
+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.
The following custom properties (aka CSS Variables) are available for component-level overrides and other general theming purposes.
+ +