Skeleton

The RadzenSkeleton component is used to display loading placeholders while content is being loaded. It supports different shapes and animation types that can be combined independently.

These demos showcase loading placeholders with multiple shape variants (Text/Circular/Rectangular), responsive text sizing based on parent font-size, animation types (None/Wave/Pulse), and complex examples demonstrating card layouts and DataGrid loading states.

Basic Usage link

Use the Variant property to specify the skeleton shape and Style to control dimensions. The component supports three shape variants - Text, Circular, and Rectangular.

Text size link

The height value of the default Text variant is a function of the parent's element font-size.

Animations link

The component has three animation types (None, Wave, Pulse).

Complex Example link

Here's how you might use skeletons in a card layout to show loading states.

DataGrid Loading Example link

This example demonstrates how to use skeletons to show loading states while a DataGrid is loading data. The skeleton mimics the actual DataGrid structure including headers, rows, and pagination.

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT