# Skeletons

> Placeholders animados para contenido en carga.

Categoría: Estado & Progreso · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Card skeleton

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden shadow-ccs-sm dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="ccs-skeleton aspect-[16/10]"></div>
  <div class="p-5 space-y-3">
    <div class="flex items-center gap-2">
      <div class="ccs-skeleton h-3 w-16 rounded-full"></div>
      <div class="ccs-skeleton h-3 w-24 rounded-full"></div>
    </div>
    <div class="ccs-skeleton h-5 w-3/4 rounded-lg"></div>
    <div class="ccs-skeleton h-3 w-full rounded-full"></div>
    <div class="ccs-skeleton h-3 w-5/6 rounded-full"></div>
    <div class="ccs-skeleton h-9 w-32 rounded-lg mt-2"></div>
  </div>
</div>
```

## List skeleton

```html
<div class="space-y-4">
  <div class="flex items-center gap-3">
    <div class="ccs-skeleton w-10 h-10 rounded-full shrink-0"></div>
    <div class="flex-1 space-y-2">
      <div class="ccs-skeleton h-3.5 w-2/5 rounded-full"></div>
      <div class="ccs-skeleton h-3 w-3/5 rounded-full"></div>
    </div>
    <div class="ccs-skeleton h-8 w-20 rounded-lg"></div>
  </div>
  <div class="flex items-center gap-3">
    <div class="ccs-skeleton w-10 h-10 rounded-full shrink-0"></div>
    <div class="flex-1 space-y-2">
      <div class="ccs-skeleton h-3.5 w-1/3 rounded-full"></div>
      <div class="ccs-skeleton h-3 w-1/2 rounded-full"></div>
    </div>
    <div class="ccs-skeleton h-8 w-20 rounded-lg"></div>
  </div>
  <div class="flex items-center gap-3">
    <div class="ccs-skeleton w-10 h-10 rounded-full shrink-0"></div>
    <div class="flex-1 space-y-2">
      <div class="ccs-skeleton h-3.5 w-1/2 rounded-full"></div>
      <div class="ccs-skeleton h-3 w-2/3 rounded-full"></div>
    </div>
    <div class="ccs-skeleton h-8 w-20 rounded-lg"></div>
  </div>
  <div class="flex items-center gap-3">
    <div class="ccs-skeleton w-10 h-10 rounded-full shrink-0"></div>
    <div class="flex-1 space-y-2">
      <div class="ccs-skeleton h-3.5 w-2/5 rounded-full"></div>
      <div class="ccs-skeleton h-3 w-3/5 rounded-full"></div>
    </div>
    <div class="ccs-skeleton h-8 w-20 rounded-lg"></div>
  </div>
</div>
```

## Table skeleton

```html
<div class="rounded-ccs border border-ccs-line bg-white overflow-hidden dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="px-5 py-4 border-b border-ccs-line flex items-center gap-3 dark:border-ccs-dark-line">
    <div class="ccs-skeleton h-4 w-40 rounded-full"></div>
    <div class="ml-auto ccs-skeleton h-8 w-24 rounded-lg"></div>
    <div class="ccs-skeleton h-8 w-20 rounded-lg"></div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="px-5 py-4 grid grid-cols-12 gap-4 items-center">
      <div class="col-span-4 flex items-center gap-3"><div class="ccs-skeleton w-8 h-8 rounded-lg"></div><div class="ccs-skeleton h-3.5 w-32 rounded-full"></div></div>
      <div class="col-span-2 ccs-skeleton h-3 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-5 w-20 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-3 w-16 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-3 w-14 rounded-full ml-auto"></div>
    </div>
    <div class="px-5 py-4 grid grid-cols-12 gap-4 items-center">
      <div class="col-span-4 flex items-center gap-3"><div class="ccs-skeleton w-8 h-8 rounded-lg"></div><div class="ccs-skeleton h-3.5 w-40 rounded-full"></div></div>
      <div class="col-span-2 ccs-skeleton h-3 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-5 w-24 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-3 w-16 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-3 w-14 rounded-full ml-auto"></div>
    </div>
    <div class="px-5 py-4 grid grid-cols-12 gap-4 items-center">
      <div class="col-span-4 flex items-center gap-3"><div class="ccs-skeleton w-8 h-8 rounded-lg"></div><div class="ccs-skeleton h-3.5 w-28 rounded-full"></div></div>
      <div class="col-span-2 ccs-skeleton h-3 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-5 w-16 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-3 w-16 rounded-full"></div>
      <div class="col-span-2 ccs-skeleton h-3 w-14 rounded-full ml-auto"></div>
    </div>
  </div>
</div>
```