Tailwind CSS Skeleton
Skeleton Tailwind CSS acts as a temporary placeholder for loading content. Enhances user experience by reducing perceived loading times in content-heavy pages.
About
Skeleton placeholders bridge loading states before real content appears. You can adjust their size, shape, and color with utility classes.
When to use:
- When a resource needs long time to load.
- When the component contains lots of information, such as List or Card.
- Only works when loading data for the first time.
- Could be replaced by Spin in any situation, but can provide a better user experience.
Default skeleton
Start with a simple placeholder block to represent a loading line or content area.
Combined layout
Combine avatar, heading, and text placeholders to mimic a fuller loading layout.
Animated skeleton
Add pulse animation to make the loading state feel more active and noticeable.