Skeleton
Skeleton component displays placeholder content while data is loading.
Playground
Experiment with all the properties of the Skeleton component in real time.
Properties
width
Width of the skeleton (in pixels).
height
Height of the skeleton (in pixels).
shape
Shape of the skeleton.
animationType
Type of loading animation.
rounded
If true and shape is rect, adds rounded corners.
Circle Shape
Use the circle shape for avatars or profile pictures.
Rounded Corners
Add rounded corners to rectangular skeletons with the rounded prop.
Wave Animation
Use the wave animation type for a shimmer effect.
Card Skeleton
Combine multiple skeletons to create loading states for complex components like cards.
User Profile Skeleton
Example of a user profile loading state combining circle and rectangle skeletons.
API Reference
Props
Prop | Default | Type |
|---|---|---|
shape | "rect" | "rect" | "circle" |
animationType | "fade" | "fade" | "wave" |
rounded | false | boolean |
width | "100%" | string | number |
height | 16 | string | number |