Skeleton

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

css

.skeleton {
  background:
    linear-gradient(
      to right,
      var(--skeleton-gradient-from),
      var(--skeleton-gradient-to),
      var(--skeleton-gradient-to),
      var(--skeleton-gradient-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