Class SfSkeleton

The Skeleton is a placeholder that animates a shimmer effect to let users know that the page's content is loading at the moment. In other terms, it simulates the layout of page content while loading the actual content.

Inheritance

System.Object

SfSkeleton

Namespace: Syncfusion.Blazor.Notifications

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSkeleton : ComponentBase

Remarks

The Width property will be prioritized and used as dimension for Circle and Square Shape. The Skeleton component provides various shapes including text, rectangle, circle, and square placeholders. Different animation effects (wave, fade, pulse, or none) can be applied to enhance the loading experience. The component is fully accessible with ARIA label support for screen readers.

Examples

Skeleton with default text shape.

<SfSkeleton Width="100%" Height="10px"></SfSkeleton>

Skeleton with rectangle Shape.

<SfSkeleton Width="100px" Height="50px" Shape="SkeletonType.Rectangle"></SfSkeleton>

Skeleton with fade effect Effect.

<SfSkeleton Width="50pt" Shape="SkeletonType.Circle" Effect="ShimmerEffect.Fade"></SfSkeleton>

Constructors

SfSkeleton()

Declaration

public SfSkeleton()

Properties

CssClass

Gets or sets a value that indicates the CSS class string to customize the appearance of Skeleton.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to customize the appearance of Skeleton. The default value is string.Empty.

Remarks

Multiple CSS classes can be applied by separating them with spaces. These classes are appended to the default Skeleton classes. Custom styles can be used to modify colors, animations, borders, and other visual aspects of the Skeleton component. The CSS classes should target the root element with the .e-skeleton class for proper styling override. Custom styling allows developers to match the skeleton's appearance with their application's design system.

Examples

In the below code example, Skeleton background color has been customized by using CssClass property.

<SfSkeleton CssClass="customize-skeleton" Width="100px" Shape="SkeletonType.Circle"></SfSkeleton>
<style>
.e-skeleton.customize-skeleton {
    background-color: darkgray;
}
</style>

Effect

Gets or sets a value that indicates the animation effect of the Skeleton.

Declaration

public ShimmerEffect Effect { get; set; }

Property Value

Type	Description
ShimmerEffect	One of the ShimmerEffect enumeration. The default value is Wave.

Remarks

The animation effect provides visual feedback to users indicating that content is loading. Wave creates a horizontal moving shimmer effect across the placeholder. Fade creates a fading in and out animation effect. Pulse creates a pulsing animation that scales the placeholder. None disables all animation effects for a static placeholder.

Examples

Skeleton with fade effect.

<SfSkeleton Effect="ShimmerEffect.Fade" Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Skeleton with pulse effect.

<SfSkeleton Effect="ShimmerEffect.Pulse" Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Skeleton with no effect.

<SfSkeleton Effect="ShimmerEffect.None" Width="100px" Height="10px"></SfSkeleton>

Height

Gets or sets a value that defines the height of the Skeleton.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	Accepts CSS units as string value (px, %, em, rem, etc.). The default value is null.

Remarks

Not required to define this property when Shape is Circle and Square. For these shapes, the Width property value is used for both dimensions. This property is primarily used for Text and Rectangle shapes. Supports all standard CSS unit formats including pixels, percentages, and relative units.

Examples

Skeleton with 10px height applied for Text.

<SfSkeleton Width="100px" Height="10px"></SfSkeleton>

Label

Gets or sets a value that defines 'aria-label' for Skeleton accessibility.

Declaration

public string Label { get; set; }

Property Value

Type	Description
System.String	Accepts a string value. The default value is Loading....

Remarks

This property improves accessibility by providing a meaningful label that screen readers can announce to users. When not explicitly set, the component will use a localized default value based on the current culture settings. The label helps assistive technologies understand that content is currently loading. This is particularly important for users who rely on screen readers to navigate web applications.

Examples

Skeleton with custom ARIA label.

<SfSkeleton Label="Fetching data..." Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Shape

Gets or sets a value that indicates the shape of the Skeleton.

Declaration

public SkeletonType Shape { get; set; }

Property Value

Type	Description
SkeletonType	One of the SkeletonType enumeration. The default value is Text.

Remarks

If the SkeletonType is Circle or Square, the Width property value will be prioritized and used as dimension for both width and height. For Text and Rectangle shapes, both Width and Height properties are used for proper dimensioning. The shape determines the visual appearance and how the shimmer effect is applied to the placeholder.

Examples

Skeleton with different shapes.

<SfSkeleton Shape="SkeletonType.Circle" Width="50px"></SfSkeleton>
<SfSkeleton Shape="SkeletonType.Rectangle" Width="100px" Height="50px"></SfSkeleton>

Visible

Gets or sets the visibility state of the Skeleton.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true, if the Skeleton is in visible state; otherwise, false. The default value is true.

Remarks

When set to false, the Skeleton component will be hidden from view but still rendered in the DOM. This property is useful for conditionally showing or hiding the loading placeholder based on application state. The visibility is controlled through CSS classes that apply appropriate display properties.

Examples

Skeleton rendered with hidden state.

<SfSkeleton Visible="false" Width="50px" Shape="SkeletonType.Square"></SfSkeleton>

Width

Gets or sets a value that defines the width of the Skeleton.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	Accepts CSS units as string value (px, %, em, rem, etc.). The default value is null.

Remarks

The property will be prioritized and used as dimension when Shape is Circle and Square. For these shapes, the Width value determines both width and height dimensions. If not specified for Text or Rectangle shapes, defaults to "100%". Supports all standard CSS unit formats including pixels, percentages, and relative units.

Examples

Skeleton with 50px radius applied for Circle.

<SfSkeleton Width="50px" Shape="SkeletonType.Circle"></SfSkeleton>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task