Components

Tailwind CSS Skeleton

The tailwind skeleton component is used as an alternative to the loading indicator. These tailwind skeletons show temporary content before the actual content is loaded.

In order to create placeholder HTML and CSS can be utilized without using javascript. Various utility classes let you modify the appearance, color and size of the placeholders. It can replace the spin and offers a better user experience.

Default placeholder

Following tailwind skeleton animation example can be used while loading text content.

 <div role='status' class='max-w-sm animate-pulse'>
<h3 class='h-3 bg-gray-300 rounded-full  w-48 mb-4'></h3>
<p class='h-2 bg-gray-300 rounded-full max-w-[380px] mb-2.5'></p>
<p class='h-2 bg-gray-300 rounded-full max-w-[340px] mb-2.5'></p>
<p class='h-2 bg-gray-300 rounded-full max-w-[320px] mb-2.5'></p>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Image placegholder

At the time of loading image and text content the image placeholder skeleton can be shown as mentioned in below tailwind loading skeleton.

 <div role='status' class='flex max-w-sm animate-pulse'>
<div class='flex-shrink-0'>
<span class='flex justify-center items-center bg-gray-300 rounded-full w-12 h-12 '></span>
</div>
<div class='ml-4 mt-2 w-full'>
<h3 class='h-3 bg-gray-300 rounded-full  w-48 mb-4'></h3>
<p class='h-2 bg-gray-300 rounded-full w-[320px] mb-2.5'></p>
<p class='h-2 bg-gray-300 rounded-full w-[320px] mb-2.5'></p>
</div>
</div>

Card placegholder

While loading content inside the card, this tailwind skeleton loader card placeholder can be used.

<div role='status' class='max-w-sm border border-gray-300 rounded-lg p-4'>
<div class="animate-pulse w-full bg-gray-300 h-48 rounded-lg mb-5 flex justify-center items-center">
  <svg class="w-8 h-8 stroke-gray-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20.5499 15.15L19.8781 14.7863C17.4132 13.4517 16.1808 12.7844 14.9244 13.0211C13.6681 13.2578 12.763 14.3279 10.9528 16.4679L7.49988 20.55M3.89988 17.85L5.53708 16.2384C6.57495 15.2167 7.09388 14.7059 7.73433 14.5134C7.98012 14.4396 8.2352 14.4011 8.49185 14.3993C9.16057 14.3944 9.80701 14.7296 11.0999 15.4M11.9999 21C12.3154 21 12.6509 21 12.9999 21C16.7711 21 18.6567 21 19.8283 19.8284C20.9999 18.6569 20.9999 16.7728 20.9999 13.0046C20.9999 12.6828 20.9999 12.3482 20.9999 12C20.9999 11.6845 20.9999 11.3491 20.9999 11.0002C20.9999 7.22883 20.9999 5.34316 19.8283 4.17158C18.6568 3 16.7711 3 12.9998 3H10.9999C7.22865 3 5.34303 3 4.17145 4.17157C2.99988 5.34315 2.99988 7.22877 2.99988 11C2.99988 11.349 2.99988 11.6845 2.99988 12C2.99988 12.3155 2.99988 12.651 2.99988 13C2.99988 16.7712 2.99988 18.6569 4.17145 19.8284C5.34303 21 7.22921 21 11.0016 21C11.3654 21 11.7021 21 11.9999 21ZM7.01353 8.85C7.01353 9.84411 7.81942 10.65 8.81354 10.65C9.80765 10.65 10.6135 9.84411 10.6135 8.85C10.6135 7.85589 9.80765 7.05 8.81354 7.05C7.81942 7.05 7.01353 7.85589 7.01353 8.85Z" stroke="stroke-current" stroke-width="1.6" stroke-linecap="round"></path>
  </svg>
</div>
<div class=' w-full flex justify-between items-start animate-pulse'>
  <div class="block">
      <h3 class='h-3 bg-gray-300 rounded-full  w-48 mb-4'></h3>
      <p class='h-2 bg-gray-300 rounded-full w-32 mb-2.5'></p>
  </div>
  <span class="h-2 bg-gray-300 rounded-full w-16 "></span>
</div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More