Skeleton

Loading placeholders that mimic content structure while data is being fetched

Basic Skeleton

Simple rectangular skeleton loaders for text content

Show Code

Circle Skeleton

Circular skeletons for avatars and profile pictures

Show Code

Card Skeleton

Complex skeleton layout mimicking card content

Show Code

List Skeleton

Skeleton for list items and table rows

Show Code

Text Skeleton

Skeleton placeholders for text content of various lengths

Show Code

Usage Notes

  • Use skeletons that match the actual content structure and dimensions
  • Vary skeleton widths to create more realistic loading loading loading-spinner states
  • Combine circular and rectangular skeletons for complex layouts
  • Keep skeleton animations subtle to avoid distraction
  • Replace skeletons with actual content as soon as data loads
  • Consider accessibility by providing appropriate aria-labels for screen readers