# Loading

> Spinners, botones loading y overlays.

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).

## Spinners

```html
<div>
  <div class="flex flex-wrap items-end gap-10">
    <div class="flex flex-col items-center gap-3">
      <div class="w-12 h-12 rounded-full border-[3px] border-ccs-bg border-t-ccs-blue ccs-spin dark:border-ccs-dark-surface dark:border-t-ccs-dark-accent"></div>
      <div class="text-xs text-ccs-slate mono dark:text-ccs-dark-text-2">classic · 48px</div>
    </div>
    <div class="flex flex-col items-center gap-3">
      <div class="w-6 h-6 rounded-full border-2 border-ccs-bg border-t-ccs-blue ccs-spin dark:border-ccs-dark-surface dark:border-t-ccs-dark-accent"></div>
      <div class="text-xs text-ccs-slate mono dark:text-ccs-dark-text-2">classic · 24px</div>
    </div>
    <div class="flex flex-col items-center gap-3">
      <div class="relative w-12 h-12">
        <svg class="w-12 h-12 ccs-spin" viewBox="0 0 50 50">
          <defs>
            <linearGradient id="loadGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#00D700"/>
              <stop offset="100%" stop-color="#003DA6"/>
            </linearGradient>
          </defs>
          <circle cx="25" cy="25" r="20" fill="none" stroke="#EEF2F8" stroke-width="4"/>
          <path d="M25 5 a20 20 0 0 1 20 20" fill="none" stroke="url(#loadGrad)" stroke-width="4" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="text-xs text-ccs-slate mono dark:text-ccs-dark-text-2">gradient</div>
    </div>
    <div class="flex flex-col items-center gap-3">
      <div class="flex items-center gap-1.5 h-12">
        <span class="w-2.5 h-2.5 rounded-full bg-ccs-blue ccs-dot dark:bg-ccs-dark-accent" style="animation-delay:-0.32s"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-ccs-blue ccs-dot dark:bg-ccs-dark-accent" style="animation-delay:-0.16s"></span>
        <span class="w-2.5 h-2.5 rounded-full bg-ccs-blue ccs-dot dark:bg-ccs-dark-accent"></span>
      </div>
      <div class="text-xs text-ccs-slate mono dark:text-ccs-dark-text-2">dots</div>
    </div>
    <div class="flex flex-col items-center gap-3">
      <div class="relative w-12 h-12 grid place-items-center">
        <span class="absolute inset-0 rounded-full bg-ccs-blue/30 animate-ping dark:bg-ccs-dark-accent/30"></span>
        <span class="relative w-5 h-5 rounded-full bg-ccs-blue dark:bg-ccs-dark-accent"></span>
      </div>
      <div class="text-xs text-ccs-slate mono dark:text-ccs-dark-text-2">pulse</div>
    </div>
    <div class="flex flex-col items-center gap-3">
      <div class="w-12 h-12 rounded-full border-[3px] border-white/15 border-t-white ccs-spin bg-ccs-ink"></div>
      <div class="text-xs text-ccs-slate mono dark:text-ccs-dark-text-2">on dark</div>
    </div>
  </div>
</div>
```

## Botones en estado loading

```html
<div>
  <div class="flex flex-wrap items-center gap-3">
    <button class="h-10 px-4 text-sm rounded-ccs bg-ccs-blue text-white font-medium inline-flex items-center gap-2.5 cursor-wait dark:bg-ccs-blue-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg" disabled>
      <span class="w-4 h-4 rounded-full border-2 border-white/30 border-t-white ccs-spin"></span>
      Guardando…
    </button>
    <button class="h-10 px-4 text-sm rounded-ccs border border-ccs-line-strong text-ccs-ink font-medium inline-flex items-center gap-2.5 cursor-wait bg-white dark:text-ccs-dark-text dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg" disabled>
      <span class="w-4 h-4 rounded-full border-2 border-ccs-line border-t-ccs-blue ccs-spin dark:border-ccs-dark-line dark:border-t-ccs-dark-accent"></span>
      Validando RUT
    </button>
    <button class="h-10 px-4 text-sm rounded-ccs bg-ccs-blue text-white font-medium inline-flex items-center gap-2.5 dark:bg-ccs-blue-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg" disabled>
      <span class="inline-flex items-center gap-1">
        <span class="w-1.5 h-1.5 rounded-full bg-white ccs-dot" style="animation-delay:-0.32s"></span>
        <span class="w-1.5 h-1.5 rounded-full bg-white ccs-dot" style="animation-delay:-0.16s"></span>
        <span class="w-1.5 h-1.5 rounded-full bg-white ccs-dot"></span>
      </span>
      Procesando
    </button>
    <button aria-label="Cargando" class="w-11 h-11 rounded-ccs bg-ccs-blue text-white grid place-items-center dark:bg-ccs-blue-mid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg" disabled>
      <span class="w-4 h-4 rounded-full border-2 border-white/30 border-t-white ccs-spin"></span>
    </button>
  </div>
</div>
```

## Estado de panel

```html
<div class="grid sm:grid-cols-2 gap-5">
  <div class="rounded-ccs border border-ccs-line bg-white p-10 flex flex-col items-center justify-center min-h-[200px] dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="w-10 h-10 rounded-full border-[3px] border-ccs-bg border-t-ccs-blue ccs-spin dark:border-ccs-dark-surface dark:border-t-ccs-dark-accent"></div>
    <div class="mt-4 text-sm font-medium">Cargando empresas…</div>
    <div class="text-xs text-ccs-slate mt-1 dark:text-ccs-dark-text-2">Esto puede tomar unos segundos</div>
  </div>
  <div class="rounded-ccs border border-ccs-line bg-white p-10 flex flex-col items-center justify-center min-h-[200px] text-center dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
    <div class="w-14 h-14 rounded-full bg-ccs-bg grid place-items-center mb-4 dark:bg-ccs-dark-overlay">
      <svg class="w-7 h-7 text-ccs-slate dark:text-ccs-dark-text-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    </div>
    <div class="text-sm font-semibold">Sin resultados</div>
    <p class="text-sm text-ccs-slate mt-1 max-w-xs dark:text-ccs-dark-text-2">No encontramos empresas que coincidan con los filtros. Prueba ajustar la búsqueda.</p>
    <button class="mt-4 h-9 px-4 rounded-ccs border border-ccs-line-strong text-sm font-medium hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:hover:text-ccs-dark-accent dark:hover:border-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100">Limpiar filtros</button>
  </div>
</div>
```

## Overlay de pantalla completa

```html
<div class="rounded-ccs border border-ccs-line bg-ccs-bg overflow-hidden h-[260px] relative dark:border-ccs-dark-line dark:bg-ccs-dark-overlay">
  <div class="p-6 opacity-50">
    <div class="h-3 rounded-full bg-white w-1/3 mb-3 dark:bg-ccs-dark-line"></div>
    <div class="h-3 rounded-full bg-white w-1/2 mb-3 dark:bg-ccs-dark-line"></div>
    <div class="h-3 rounded-full bg-white w-2/5 dark:bg-ccs-dark-line"></div>
  </div>
  <div class="absolute inset-0 backdrop-blur-sm bg-white/70 grid place-items-center dark:bg-ccs-dark-surface/70">
    <div class="text-center">
      <div class="relative w-14 h-14 mx-auto">
        <svg class="w-14 h-14 ccs-spin" viewBox="0 0 50 50">
          <circle cx="25" cy="25" r="20" fill="none" stroke="#D7DDE8" stroke-width="4"/>
          <path d="M25 5 a20 20 0 0 1 20 20" fill="none" stroke="#003DA6" stroke-width="4" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="mt-4 text-sm font-semibold">Generando reporte</div>
      <div class="text-xs text-ccs-slate mt-1 dark:text-ccs-dark-text-2">No cierres esta ventana</div>
    </div>
  </div>
</div>
```