Skeleton

<div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem;">
  <div class="skeleton skeleton-title" style="width: 60%;"></div>
  <div class="skeleton skeleton-text"></div>
  <div class="skeleton skeleton-text"></div>
  <div class="skeleton skeleton-text" style="width: 70%;"></div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3 p-6">
  <div class="h-6 w-[60%] rounded bg-base-200 animate-pulse"></div>
  <div class="h-4 w-full rounded bg-base-200 animate-pulse"></div>
  <div class="h-4 w-full rounded bg-base-200 animate-pulse"></div>
  <div class="h-4 w-[70%] rounded bg-base-200 animate-pulse"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

<div style="max-width: 300px; padding: 1rem;">
  <div class="card card-bordered" style="overflow: hidden;">
    <div class="skeleton" style="height: 160px; border-radius: 0;"></div>
    <div class="card-body">
      <div class="skeleton skeleton-title" style="width: 70%;"></div>
      <div class="skeleton skeleton-text"></div>
      <div class="skeleton skeleton-text" style="width: 50%;"></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="max-w-[300px] p-4">
  <div class="card card-bordered overflow-hidden">
    <div class="h-40 bg-base-200 animate-pulse"></div>
    <div class="card-body">
      <div class="h-6 w-[70%] rounded bg-base-200 animate-pulse"></div>
      <div class="h-4 w-full rounded bg-base-200 animate-pulse"></div>
      <div class="h-4 w-[50%] rounded bg-base-200 animate-pulse"></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

<div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem;">
  <div class="skeleton skeleton-circle" style="width: 2.5rem; height: 2.5rem;"></div>
  <div style="flex: 1;">
    <div class="skeleton skeleton-text" style="width: 40%; margin-bottom: 0.5rem;"></div>
    <div class="skeleton skeleton-text" style="width: 70%;"></div>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-center gap-3 p-4">
  <div class="size-10 rounded-full bg-base-200 animate-pulse shrink-0"></div>
  <div class="flex-1">
    <div class="h-4 w-[40%] rounded bg-base-200 animate-pulse mb-2"></div>
    <div class="h-4 w-[70%] rounded bg-base-200 animate-pulse"></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS animation

<div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem;">
  <div class="skeleton skeleton-pulse skeleton-title" style="width: 50%;"></div>
  <div class="skeleton skeleton-pulse skeleton-text"></div>
  <div class="skeleton skeleton-pulse skeleton-text" style="width: 80%;"></div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3 p-6">
  <div class="h-6 w-[50%] rounded bg-base-200 animate-pulse"></div>
  <div class="h-4 w-full rounded bg-base-200 animate-pulse"></div>
  <div class="h-4 w-[80%] rounded bg-base-200 animate-pulse"></div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS animation