Class RadzenSkeleton
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.
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenSkeleton : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableExamples
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
RadzenSkeleton()
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.
Declaration
public RadzenSkeleton()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>Properties
Animation
Gets or sets the animation effect applied to the skeleton placeholder. None (static), Pulse (fade in/out), or Wave (shimmer effect moving across).
Declaration
[Parameter]
public SkeletonAnimation Animation { get; set; }Property Value
| Type | Description |
|---|---|
| SkeletonAnimation | The animation type. Default is None. |
Variant
Gets or sets the shape variant of the skeleton placeholder. Text creates horizontal bars, Circle creates circular shapes, Rectangle creates rectangular blocks.
Declaration
[Parameter]
public SkeletonVariant Variant { get; set; }Property Value
| Type | Description |
|---|---|
| SkeletonVariant | The skeleton shape variant. Default is Text. |
Methods
BuildRenderTree(RenderTreeBuilder)
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.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
GetComponentCssClass()
Gets the component CSS class.
Declaration
protected override string GetComponentCssClass()Returns
| Type | Description |
|---|---|
| string |
Overrides
GetStyle()
Gets the final style string including component-specific styles.
Declaration
protected string GetStyle()Returns
| Type | Description |
|---|---|
| string | The style string. |