RadzenSkeleton Class

A skeleton screen component that displays placeholder shapes while content is loading. RadzenSkeleton provides subtle loading states that match content structure, improving perceived performance. Shows gray placeholder shapes that mimic the structure of the content being loaded, providing better UX than spinners by showing users the approximate layout before content appears, making loading feel faster with immediate feedback, and reducing anxiety through progressive disclosure. Supports multiple shapes including Text (horizontal bars for text lines, default), Circle (circular placeholders for avatars or icons), and Rectangle (rectangular blocks for images or cards). Animations (None, Pulse, Wave) can be applied for additional loading feedback. Use multiple skeletons to represent the full structure of your loading content.

Inheritance

Implements

Inherited Members

Syntax

public class RadzenSkeleton : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Text line skeleton:

<RadzenSkeleton Style="width: 100%; height: 20px;" Animation="SkeletonAnimation.Pulse" />

Avatar and text skeleton:

<RadzenStack Orientation="Orientation.Horizontal" Gap="1rem" AlignItems="AlignItems.Center">
    <RadzenSkeleton Variant="SkeletonVariant.Circle" Style="width: 50px; height: 50px;" />
    <RadzenStack Gap="0.5rem">
        <RadzenSkeleton Style="width: 200px; height: 16px;" />
        <RadzenSkeleton Style="width: 150px; height: 16px;" />
    </RadzenStack>
</RadzenStack>

Image card skeleton:

<RadzenCard Style="width: 300px;">
    <RadzenSkeleton Variant="SkeletonVariant.Rectangle" Style="width: 100%; height: 200px;" Animation="SkeletonAnimation.Wave" />
    <RadzenSkeleton Style="width: 80%; height: 24px; margin-top: 1rem;" />
    <RadzenSkeleton Style="width: 60%; height: 16px; margin-top: 0.5rem;" />
</RadzenCard>

Constructors

public RadzenSkeleton()

Properties

public SkeletonAnimation Animation { get; set; }

public SkeletonVariant Variant { get; set; }

Methods

protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)

protected override string GetComponentCssClass()

protected string GetStyle()