Application toolkit - 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

Simplest Skeleton usage.

Open this basic skeleton example in new window
Copy basic skeleton code 
<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>
Close basic skeleton code

Complex combination

Complex combination with avatar and multiple paragraphs.

Open this complex skeleton example in new window
Copy complex skeleton code 
<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>
Close complex skeleton code

Active animation

Display active animation.

Open this active animation skeleton example in new window
Copy active animation skeleton code 
<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>
Close active animation skeleton code