1. Components
  2. Skeleton

Components

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

Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our 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.

Example

Simplest Skeleton usage.

Complex combination

Complex combination with avatar and multiple paragraphs.

Active animation

Display active animation.