Tailwind CSS Skeleton

Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.

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.

Basic usage

Example

Simplest Skeleton usage.

Copy

                      
                        <h3 class="h-4 bg-gray-200 rounded-md dark:bg-gray-700" style="width: 40%;"></h3>

                        <ul class="mt-5 space-y-3">
                          <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                          <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                          <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                          <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                        </ul>

Complex combination

Complex combination with avatar and multiple paragraphs.

Copy

                      
                        <div class="flex">
                          <div class="flex-shrink-0">
                            <span class="w-12 h-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
                          </div>

                          <div class="ml-4 mt-2 w-full">
                            <h3 class="h-4 bg-gray-200 rounded-md dark:bg-gray-700" style="width: 40%;"></h3>

                            <ul class="mt-5 space-y-3">
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                            </ul>
                          </div>
                        </div>

Active animation

Display active animation.

Copy

                      
                        <div class="flex animate-pulse">
                          <div class="flex-shrink-0">
                            <span class="w-12 h-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
                          </div>

                          <div class="ml-4 mt-2 w-full">
                            <h3 class="h-4 bg-gray-200 rounded-md dark:bg-gray-700" style="width: 40%;"></h3>

                            <ul class="mt-5 space-y-3">
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                              <li class="w-full h-4 bg-gray-200 rounded-md dark:bg-gray-700"></li>
                            </ul>
                          </div>
                        </div>

About

When to use:

Basic usage

Example

Complex combination

Active animation

On this page