Skeleton

Usage

Variants

---

Speed Variants

Card Skeleton

Profile Card Skeleton

Table Skeleton

Form Skeleton

Text Content Skeleton

Media Content Skeleton

---

Features

• Customizable speed: Control the speed of the animation with options like slow, normal, and fast.
• Color options: Customize the skeleton's color with light, dark, primary, or secondary.
• Loading state: Easily toggle the skeleton display using the isLoading prop.
• Animation control: Disable the animation with the disableAnimation prop.
• Flexible usage: The skeleton component can be used to create loading states for various UI elements like cards, tables, and media content.

---

Types of Skeletons

These are just a few examples of how the Skeleton component can be used:

• Card Skeleton: A skeleton loader that mimics a card layout, typically used for product cards or content cards.
• Profile Card Skeleton: A skeleton that resembles a user profile card, ideal for loading user profile information.
• Table Skeleton: A skeleton that represents a table, simulating rows and columns during data loading.
• Form Skeleton: A skeleton for form fields, such as input fields, buttons, and labels, used during form data loading.
• Text Content Skeleton: A skeleton designed to represent text content like paragraphs or list items during loading.
• Media Content Skeleton (Video & Audio): A skeleton used to represent media content such as video or audio players during loading.

These skeleton styles are built using the Skeleton component, where various combinations of speed, color, and animation properties are applied to suit each use case.

---

Props