Skeleton

Introduces a utility class skeleton for loading state of page or component.

css

.skeleton {
  background: linear-gradient(to right, var(--skeleton-from), var(--skeleton-to), var(--skeleton-to), var(--skeleton-from));
  opacity: var(--skeleton-opacity);
  transition: var(--transition-opacity);
  animation: move-indeterminate 1.5s linear infinite;
  background-size: 400% 100%;
}

Example

html

<div class="skeleton rounded w-full h-16"></div>

Skeleton ​

Example ​

Skeleton

Example