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.
Use the Variant property to specify the skeleton shape and Style to control dimensions. The component supports three shape variants - Text, Circular, and Rectangular.
The height value of the default Text variant is a function of the parent's element font-size.
The component has three animation types (None, Wave, Pulse).
Here's how you might use skeletons in a card layout to show loading states.
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.
ID | Photo | First Name | Last Name | Job Title | Title | Birth Date | Hire Date | Address | City | Region | Postal Code | Country | Home Phone | Extension | Notes |
|---|