Skelton

Components

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

Example

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

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

Complex combination

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

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

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

Active animation

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

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

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

Components

Skelton

Example

Complex combination

Active animation

On this page