Blazor Skeleton Overview

The Blazor Skeleton is a loading indicator. What separates it from conventional loaders is that it mimics the page layout by showing elements in a similar shape as the actual content that will appear after loading.

The Skeleton component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Skeleton

1. Use the <TelerikSkeleton> tag.
2. Set the Visible parameter to a bool property or expression.
3. Set the Width and Height parameters.
4. Use the ShapeType parameter to set the shape of the Skeleton.

Basic Skeleton

@* The Telerik UI for Blazor Skeleton component with its basic settings. *@

@if (String.IsNullOrEmpty(Text))
{
    <TelerikSkeleton ShapeType="@SkeletonShapeType.Rectangle"
                     Width="61px"
                     Height="28px"
                     Visible="@isVisible"></TelerikSkeleton>
}
else
{
    <TelerikButton Size="medium">@Text</TelerikButton>
}

@code {
    string Text { get; set; } = string.Empty;
    bool isVisible { get; set; }

    protected override async Task OnInitializedAsync()
    {
        isVisible = true;
        await Task.Delay(2000);

        Text = "Button";

        isVisible = false;
    }
}

Appearance

The Telerik UI for Blazor Skeleton provides various options to control its visual appearance:

• ShapeType
• AnimationType

Skeleton Parameters

The table below, lists the available parameters for the Skeleton component.

Parameter	Type and Default Value	Description
Class	string	Renders a custom CSS class to the <span class="k-skeleton"> element.
ShapeType	SkeletonShapeType enum (Text)	Sets the shape.
AnimationType	SkeletonAnimationType enum (Pulse)	Sets the animation of the Skeleton.
Width	string	Sets the width of the Skeleton component. Required for every shape.
Height	string	Sets the height of the Skeleton component. Require for the Circle and Rectangle shapes. The Text shape calculates its own height, but you can override it with the Height parameter.
Visible	bool (true)	Controls if the Skeleton is rendered on the page.

Next Steps

• Check the Skeleton appearance settings

See Also

• Live Demo: Skeleton
• Skeleton API Reference