Placeholder.
Make use of Tailwind's unique placeholder styles to create visually consistent loading states that keep your interface looking polished while data is being loaded.
PlaceholderPlaceholder
Basic Placeholder
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="card overflow-hidden">
<img class="card-img-top img-fluid" src="assets/images/product.jpg" alt="Card image cap">
<div class="p-7.5">
<h5 class="text-lg mb-2">Card title</h5>
<p class="mb-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card overflow-hidden">
<img class="card-img-top img-fluid" src="assets/images/product.jpg" alt="Card image cap">
<div class="p-7.5">
<h5 class="text-lg mb-2">
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/2"></span>
</h5>
<p class="mb-4">
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-7/12"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/3"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/3"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/2"></span>
</p>
<a class="btn btn-primary min-h-3.5 align-middle cursor-wait pointer-events-none opacity-50 animate-placeholderglow w-1/2 before:inline-block"></a>
</div>
</div>
</div>
Placeholder Width
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-1/2"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-3/4"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow" style="width: 25%;"></span>
</div>
Placeholder Animation
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderwave w-full"></span>
</div>
Placeholder Sizes
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
<span class="inline-block min-h-[1.2em] align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
<span class="inline-block min-h-[.8em] align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
<span class="inline-block min-h-[.6em] align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
</div>
Placeholder Colors
<div class="card shadow-none! rounded-none! h-auto! mb-0! border-b border-bordercolor">
<span class="inline-block min-h-3.5 align-middle cursor-wait bg-current opacity-50 animate-placeholderglow w-full"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-primary"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-secondary"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-success"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-danger"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-warning"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-info"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-light"></span>
<span class="inline-block min-h-3.5 align-middle cursor-wait opacity-50 animate-placeholderglow w-full bg-dark"></span>
</div>