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 Variable | Expected value |
---|---|
--skeleton-fill | Color |
--skeleton-animation-fill | Color |
--skeleton-animation-gradient | Linear gradient |
--skeleton-animation-timing | Easing 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
Name | Module | Package |
---|---|---|
FoundationElement | /src/foundation-element/foundation-element.js |
Fields
Name | Privacy | Type | Default | Description | Inherited From |
---|---|---|---|---|---|
fill | public | string | Indicates the Skeleton should have a filled style. | ||
shape | public | SkeletonShape | "rect" | Indicates what the shape of the Skeleton should be. | |
pattern | public | string | Indicates that the component can accept a pattern URL. | ||
shimmer | public | boolean | Indicates that the component has an activated shimmer effect | ||
$presentation | public | ComponentPresentation or null | A property which resolves the ComponentPresentation instance for the current component. | FoundationElement | |
template | public | ElementViewTemplate or void or null | Sets 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 | |
styles | public | ElementStyles or void or null | Sets 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
Name | Privacy | Description | Parameters | Return | Inherited From |
---|---|---|---|---|---|
templateChanged | protected | void | FoundationElement | ||
stylesChanged | protected | void | FoundationElement |
Attributes
Name | Field | Inherited From |
---|---|---|
fill | fill | |
shape | shape | |
pattern | pattern | |
shimmer |
Slots
Name | Description |
---|---|
The default slot |