Skeleton: Blazor skeleton component

Examples

Shapes

Text, Circle and Rectangle, sized with Width and Height.

website/Examples/Feedback/SkeletonShapesExample.razor Source

Card placeholders

Compose skeletons into the layout of the real cards so nothing jumps when they load.

website/Examples/Feedback/SkeletonCardExample.razor Source

Swap in the content

Show skeletons while loading, then render the real thing in their place.

website/Examples/Feedback/SkeletonLoadingExample.razor Source

Playground

SkeletonType SkeletonType

Width

Height

<Skeleton
          SkeletonType="SkeletonType.Rectangle"
          Width="16rem"
          Height="6rem" />

API

<Skeleton>

DaisyBlazor

Parameters

Animation object
= null
Accepted for MudBlazor compatibility; daisyUI handles the pulse animation.
Height string
= null
CSS height (e.g. "1rem", "40px"); applied as inline style.
SkeletonType SkeletonType
= SkeletonType.Text
Placeholder shape (Circle renders a rounded block).
Width string
= null
CSS width (e.g. "100%", "200px"); applied as inline style.
Class string
= null
Extra CSS classes merged onto the skeleton element.
Style string
= null
Inline CSS styles appended after the Width and Height styles.

Name	Type	Default	Description
Animation	object	null	Accepted for MudBlazor compatibility; daisyUI handles the pulse animation.
Height	string	null	CSS height (e.g. "1rem", "40px"); applied as inline style.
SkeletonType	SkeletonType	SkeletonType.Text	Placeholder shape (Circle renders a rounded block).
Width	string	null	CSS width (e.g. "100%", "200px"); applied as inline style.
Class	string	null	Extra CSS classes merged onto the skeleton element.
Style	string	null	Inline CSS styles appended after the Width and Height styles.

From MudSkeleton

Skeleton keeps MudSkeleton's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Animation is accepted but ignored: daisyUI handles the pulse.