Skeleton
The Skeleton component acts as a placeholder that mimics the final layout, letting users know content is loading. It reduces frustration, keeps users informed, and enhances the overall experience by making loading times feel smoother and less disruptive.
Usage
- Use during data fetching or loading states.
- Helps reduce perceived wait times by showing a visual placeholder.
- Ideal for loading lists, cards, or any content-heavy sections.
- Enhances user experience by providing a smooth transition while content loads.
Anatomy
The skeleton comprises various shapes that outline the layout and structure of a specific page.
Options
Skeleton are available in different options.
Circle Skeleton
Without Circle Skeleton
Skeleton Example
Skeleton Example
Skeleton Example
Skeleton Example
Live Demo
The Skeleton is demonstrated in a live environment in this demo.