Skeleton Appearance

Updated on Jul 1, 2026

This article explains how to control the visual appearance of the Telerik Skeleton component for Blazor.

• AnimationType
• ShapeType

AnimationType

The Skeleton AnimationType parameter controls the animation of the Skeleton. Set a predefined option that is a member of the SkeletonAnimationType enum. The default value is Pulse.

Using Skeleton animations

<div style="display: flex; gap: 2em;">
    <div style="flex: 1">
        Pulse Animation (default)
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.Pulse"
                         Height="40px"
                         ShapeType="@SkeletonShapeType.Rectangle" />
    </div>
    <div style="flex: 1">
        Wave Animation
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.Wave"
                         Height="40px"
                         ShapeType="@SkeletonShapeType.Rectangle" />
    </div>
    <div style="flex: 1">
        No Animation
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.None"
                         Height="40px"
                         ShapeType="@SkeletonShapeType.Rectangle" />
    </div>
</div>

ShapeType

The Skeleton ShapeType parameter sets the form of the Skeleton. It takes a member of the SkeletonShapeType enum and the default value is Text.

The differences between Rectangle and Text are:

• The Text shape has rounded corners.
• The effective Text shape height is 60% of the set Height. In this way, you can display multiple Text Skeletons one below the other with empty space in-between.

Using Skeleton shapes

<div style="display: flex; gap: 2em;">
    <div style="flex: 1">
        Circle (default)

        <TelerikSkeleton Height="64px"
                        ShapeType="@SkeletonShapeType.Circle"
                        Width="64px" />
    </div>
    <div style="flex: 1">
        Rectangle

        <TelerikSkeleton Height="64px"
                        ShapeType="@SkeletonShapeType.Rectangle" />
    </div>
    <div style="flex: 1">
        Text (default)

        <TelerikSkeleton Height="24px" />
        <TelerikSkeleton Height="24px" />
        <TelerikSkeleton Height="24px" />
    </div>
</div>

ThemeBuilder

To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.

See Also

• Live Demo: Skeleton Appearance