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.

Telerik UI for Blazor Ninja image

The Skeleton component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day 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

See Also

In this article