Skip to main content
Version: 1.x

fast-skeleton

The skeleton component is used as a visual placeholder for an element while it is in a loading state and usually presents itself as a simplified wireframe-like version of the UI it is representing.

Setup

import {
provideFASTDesignSystem,
fastSkeleton
} from "@microsoft/fast-components";

provideFASTDesignSystem()
.register(
fastSkeleton()
);

Usage

Basic Usage

<fast-skeleton
style="
border-radius: 4px;
width: 50px;
height: 50px;
"
shape="circle"
></fast-skeleton>

Pattern

A URL for an image asset may be passed to the pattern attribute. In this mode, the fast-skeleton component is used as a container for a transparent SVG that may express a more complex placeholder

<fast-skeleton
style="
border-radius: 4px;
width: 500px;
height: 250px;
"
shape="rect"
pattern="https://static.fast.design/assets/skeleton-test-pattern.svg"
></fast-skeleton>

Shimmer

The shimmer boolean attribute will activate the component's shimmer effect.

<fast-skeleton
style="
border-radius: 4px;
width: 500px;
height: 250px;
"
shape="rect"
pattern="https://static.fast.design/assets/skeleton-test-pattern.svg"
shimmer
></fast-skeleton>

Custom SVG

An inline SVG can also be inserted into the slot of the fast-skeleton.

<fast-skeleton
style="
border-radius: 4px;
width: 500px;
height: 250px;
"
shape="rect"
shimmer
>
<svg
style="position: absolute; left: 0; top: 0;"
id="pattern"
width="100%"
height="100%"
>
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />
<rect x="0" y="0" width="100%" height="45%" rx="4" />
<rect x="25" y="55%" width="90%" height="15px" rx="4" />
<rect x="25" y="65%" width="70%" height="15px" rx="4" />
<rect x="25" y="80%" width="90px" height="30px" rx="4" />
</mask>
</defs>
<rect
x="0"
y="0"
width="100%"
height="100%"
mask="url(#mask)"
fill="#ffffff"
/>
</svg>
</fast-skeleton>

Further Customizations

The following CSS variables can be used to customize the appearance.

CSS VariableExpected value
--skeleton-fillColor
--skeleton-animation-fillColor
--skeleton-animation-gradientLinear gradient
--skeleton-animation-timingEasing function

Create your own design

import { Skeleton, skeletonTemplate as template } from "@microsoft/fast-foundation";
import { skeletonStyles as styles } from "./my-skeleton.styles";

export const mySkeleton = Skeleton.compose({
baseName: "skeleton",
template,
styles,
});

API

class: Skeleton

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
fillpublicstringIndicates the Skeleton should have a filled style.
shapepublicSkeletonShape"rect"Indicates what the shape of the Skeleton should be.
patternpublicstringIndicates that the component can accept a pattern URL.
shimmerpublicbooleanIndicates that the component has an activated shimmer effect
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Attributes

NameFieldInherited From
fillfill
shapeshape
patternpattern
shimmer

Slots

NameDescription
The default slot

Additional resources