Skeleton Component

Skeleton component for displaying loading placeholders while content is being fetched. This component renders various variants that mimic the eventual content layout, providing visual feedback to users during loading states. It supports different variants, animations, and customization options to match your application's design.

Usage

To import and use the Skeleton component in your application, use the following code snippet:

import { Skeleton, Variants } from "@syncfusion/react-notifications";

<Skeleton variant={Variants.Circle} width={50} height={50} animation={AnimationType.Wave} />

import { Skeleton, Variants } from "@syncfusion/react-notifications";

<Skeleton variant={Variants.Circle} width={50} height={50} animation={AnimationType.Wave} />

Demos

Explore the demos of the React Skeleton component. Refer to this page.

Props

The following table outlines the props for the Skeleton component:

Name	Type	Default	Description
animation	AnimationType	AnimationType.Wave	The animation effect applied to the skeleton during loading state. Can be one of the predefined effects from AnimationType enum or a custom string value.
height	string \| number	'auto'	Height of the skeleton element. Can be specified as a CSS-valid string (e.g., '100px', '50%') or as a number of pixels.
label	string	-	Optional text label for the skeleton for accessibility or identification purposes. This is typically not displayed visually but can be used for screen readers.
variant	Variants	Variants.Text	Determines the variant of the skeleton element. Can be one of the predefined types from Variants enum or a custom string value.
width	string \| number	'auto'	Width of the skeleton element. Can be specified as a CSS-valid string (e.g., '100px', '50%') or as a number of pixels.