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.