Skeleton

Basic #

<div class="space-y-2" aria-live="assertive" aria-atomic="true">
  <div class="w-9/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-11/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-8/12 h-4 bg-gray-200 rounded animate-pulse"></div>
</div>

With Circle #

<div class="flex space-x-3" aria-live="assertive" aria-atomic="true">
  <div class="flex-none w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
  <div class="w-full space-y-2">
    <div class="w-9/12 h-4 bg-gray-200 rounded animate-pulse"></div>
    <div class="w-11/12 h-4 bg-gray-200 rounded animate-pulse"></div>
    <div class="w-8/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  </div>
</div>

More Lines #

<div class="space-y-2" aria-live="assertive" aria-atomic="true">
  <div class="w-9/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-11/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-8/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-7/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-10/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-9/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-11/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-8/12 h-4 bg-gray-200 rounded animate-pulse"></div>
  <div class="w-7/12 h-4 bg-gray-200 rounded animate-pulse"></div>
</div>