Skeleton
fluent-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 {
provideFluentDesignSystem,
fluentSkeleton
} from "@fluentui/web-components";
provideFluentDesignSystem()
.register(
fluentSkeleton()
);
Pattern
A URL for an image asset may be passed to the pattern attribute. In this mode, the fluent-skeleton component is used as a container for a transparent SVG that may express a more complex placeholder
<fluent-skeleton
style="
border-radius: 4px;
width: 500px;
height: 250px;
"
shape="rect"
pattern="https://static.fast.design/assets/skeleton-test-pattern.svg"
></fluent-skeleton>
Shimmer
The shimmer boolean attribute will activate the component's shimmer effect.
Custom SVG
<fluent-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>
</fluent-skeleton>
Example
FluentSkeleton
The <FluentSkeleton>
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.
<FluentSkeleton>
wraps the <fluent-skeleton>
element, a web component implementation of a radio element leveraging the Fluent UI design system.
Usage
@using Microsoft.Fast.Components.FluentUI
<style>
fluent-card {
--card-width: 500px;
--card-height: auto;
}
.card-padding {
padding: 20px;
}
</style>
<FluentCard class="card-padding">
<FluentSkeleton style="border-radius: 4px; width: 50px; height: 50px;" Shape="Shape.Circle"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" Shape="Shape.Rect"></FluentSkeleton>
<FluentSkeleton style="border-radius: 4px; width: 75px; height: 30px; margin-top: 20px; margin-bottom: 10px;" Shape="Shape.Rect"></FluentSkeleton>
</FluentCard>
Example
See the component in action with implementation examples at the Blazor demo site.