Skeleton Loader
UI ComponentsA placeholder UI that mimics the layout of content while it's loading, using animated gray shapes to represent text, images, and other elements.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Skeleton Loader coming soon.
How It Works in Apps/Websites
Skeletons show where content will appear before it loads, reducing perceived loading time. They mirror the actual layout: rectangles for images, lines for text, circles for avatars. A shimmer animation (light gradient moving across) indicates loading progress. Once content loads, skeletons are replaced with real content.
How AI Interprets This Term
When you say 'skeleton loader', AI expects: gray placeholder shapes matching the content layout. Rectangles for images, multiple horizontal lines for text (varying widths), circles for avatars. A subtle shimmer/pulse animation sweeping left to right. Colors typically #e5e5e5 with lighter shimmer.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a skeleton loader for a card with image, title, and description
Design a skeleton loader for a product card: 200x150px rectangle for image, one 80% width line for title, two 100% width lines for description. Subtle shimmer animation (gradient from left to right in 1.5s loop). Gray background #f3f4f6.
Show a skeleton loader vs a loading spinner vs a progress bar for the same content loading scenario
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Content-heavy pages loading
- •Cards, lists, and feeds
- •When you know the content structure
- •Better UX than blank screens
When NOT to Use
- •Very fast operations
- •Unknown content structure
- •Full page reloads
Related Terms
Card
A contained, flexible component that groups related information and actions, typically with a border, shadow, or background that visually separates it from the page.
Loading Spinner
An animated circular indicator that shows users that a process is in progress, typically used during data fetching or form submissions.
Progress Bar
A horizontal indicator that shows the completion status of a task or process, filling from left to right as progress is made.