Skeleton
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.
Examples
Element blocks
Download:
Element blocks with shimmer effect
This example uses an isolated CSS file to define margins.
Download:
Using SVG via Pattern attribute
Download:
Using inline SVG
Download:
Documentation
FluentSkeleton Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Fill | string? | Indicates the Skeleton should have a filled style. | |
Height | string | 50px | Gets or sets the height of the skeleton. |
Pattern | string? | Gets or sets the skeleton pattern. | |
Shape | SkeletonShape? | Rect | Gets or sets the shape of the skeleton. See SkeletonShape |
Shimmer | bool? | Gets or sets a value indicating whether the skeleton is shimmered. | |
Visible | bool | True | Gets or sets a value indicating whether the skeleton is visible. |
Width | string | 50px | Gets or sets the width of the skeleton. |