Appearance Settings

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

The Skeleton component provides multiple parameters that control its appearance:

• ShapeType
• AnimationType

ShapeType

The ShapeType parameter sets the shape of the Skeleton. It takes a member of the SkeletonShapeType enum:

• Text (default)
• Rectangle
• Circle

Change the ShapeType

@*This example shows the difference between the shapes of the Skeleton*@

<div class="row">
    <div class="col-4" style="position: relative;">
        <TelerikSkeleton ShapeType="@SkeletonShapeType.Circle"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position: relative;">
        <TelerikSkeleton ShapeType="@SkeletonShapeType.Rectangle"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position: relative;">
        <TelerikSkeleton ShapeType="@SkeletonShapeType.Text"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
</div>

AnimationType

The AnimationType parameter controls the type of animation for the Skeleton. There are three predefined options, which are members of the SkeletonAnimationType enum:

• None
• Pulse (default)
• Wave

The animations for the Skeleton

@* The different animations for the Skeleton. *@

<div class="row">
    <div class="col-4" style="position:relative;">
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.None"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position:relative;">
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.Pulse"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </div>
    <div class="col-4" style="position:relative;">
        <TelerikSkeleton AnimationType="@SkeletonAnimationType.Wave"
                         Width="50px" Height="50px" Visible="true">
        </TelerikSkeleton>
    </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