Skip to content

Skeleton

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

View Source 
css
.skeleton {
  background:
  linear-gradient(
      270deg,
      color-mix(in sRGB, var(--color-body) 50%, var(--color-main)),
      color-mix(in sRGB, var(--color-body) 80%, var(--color-main)),
      color-mix(in sRGB, var(--color-body) 80%, var(--color-main)),
      color-mix(in sRGB, var(--color-body) 50%, var(--color-main))
  );
  background-size: 400% 100%;
  animation: skeleton-wave 1.5s linear infinite;
  opacity: 0.3;
  transition: opacity 0.3s ease-out;
}

Example

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

Released under the MIT License.