New to Telerik UI for Blazor? Download free 30-day trial

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

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>

See Also

In this article