Skeleton

A pulsing placeholder for content that is still loading.

Usage

<!-- Text line -->
<div x-data="skeleton({ shape: 'text', class: 'w-3/4' })" x-bind="skeletonAttrs"></div>

<!-- Avatar circle -->
<div x-data="skeleton({ shape: 'circle' })" x-bind="skeletonAttrs"></div>

<!-- Block -->
<div x-data="skeleton({ shape: 'block', class: 'h-32' })" x-bind="skeletonAttrs"></div>