KendoReact Skeleton Overview

The React Skeleton component shows a preview of your content while it loads.

This component helps make your app feel faster to users. While data is loading, the Skeleton shows simple shapes where the real content will appear, making the wait feel shorter.

The KendoReact Skeleton is distributed through the kendo-react-indicators NPM package.

The following demo shows a social media card with skeleton placeholders next to a fully loaded card. It helps you see how skeletons can improve the loading experience.

Change Theme

Theme

Loading ...

The Skeleton is part of the KendoReact Indicators component library. The procedures for installing, importing, and using the Indicators are identical for all components in the package. To learn how to use the Skeleton and the rest of the Indicators, see the Getting Started with the KendoReact Indicators guide.

Key Features

• Shapes—The Skeleton component offers three options for the shape prop to match different content types: circle for avatars and icons, text (default) for lines of content, and rectangle for images and content blocks.
• Animations—The Skeleton component offers three options for the animation prop to enhance loading states: pulse (default) that creates a subtle fading effect, wave that displays a sweeping animation across elements, or false to disable animations entirely.

Suggested Links

• API Reference of the Skeleton
• API Reference of the SkeletonProps
• React Skeleton High-Level Overview