React Skeleton

The Skeleton component enhances user engagement by improving loading states during data retrieval.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Skeleton component to the project.

Installing Syncfusion® React packages

To use the Skeleton component, install the @syncfusion/react-notifications package:

npm install @syncfusion/react-notifications

Adding CSS reference

Import the Skeleton component’s required CSS references as follows in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-notifications/styles/material.css';

Adding Skeleton component

To include the Skeleton component in your application import the Skeleton from @syncfusion/react-notifications package in App.tsx.

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

Add the Skeleton component in application as shown in below code example.

import { Skeleton, Variants } from "@syncfusion/react-notifications";
import './App.css';

export default function App() {
    return (
        <div className="component-section">
            <Skeleton variant={Variants.Rectangle} width='100px' height={130} />
        </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates the Skeleton component is rendered with the given shape.

Variants

The Skeleton component provides Text, Circular, Rectangular, and Square variants for consistent loading UI design via the variant property.

Animations

Enhance loading with the Skeleton component's animations: Wave, Pulse, Fade, or None via the animation property.

Pulse

The Pulse animation creates a subtle rhythmic effect, ideal for emphasizing loading elements in dashboards and data-rich interfaces.

Fade

The Fade animation offers smooth opacity transitions, making it a minimalist loading indicator perfect for professional, content-focused interfaces.

Wave

The Wave animation smoothly indicates active loading in interactive apps and media-rich environments.

Transitions

The Skeleton component enhances loading experiences, ensuring visual consistency in dynamic applications with frequent content updates. This approach fosters responsive interfaces during complex data operations.

Color

You can customize the component’s color by adjusting its background-color CSS property.

Accessibility

The Skeleton component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Skeleton component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Skeleton component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Skeleton component: