GALERÍA DE COMPONENTES

Skeletons de carga

Una espera que anticipa el contenido de tu interfaz.

Diseña la espera antes de mostrar los datos.

Prueba cada bloque por separado o carga todos juntos. Los ejemplos son locales y respetan el tema y la preferencia de movimiento reducido.

Perfil y avatar

Skeleton reutilizable

Un encabezado de usuario con avatar y datos de contacto.

Andrea Flores

Administradora del espacio

andrea@example.com · Ciudad de México

Cuenta verificada y lista para trabajar.

Contenido listo.
Ver y copiar HTML 
<!-- INICIO: Skeleton Perfil y avatar -->
<section
  id="skeleton-profile"
  class="panel demo-card"
  data-component="skeleton-profile"
  data-skeleton-demo
>
  <div class="panel-heading">
    <h2>Perfil y avatar</h2>
    <span class="tag">Skeleton reutilizable</span>
  </div>
  <p class="demo-description">Un encabezado de usuario con avatar y datos de contacto.</p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-skeleton-start>Probar skeleton</button
    ><button class="btn outline" type="button" data-skeleton-cancel hidden>Cancelar</button>
  </div>
  <div class="skeleton-demo-region" data-skeleton-region aria-busy="false">
    <div class="skeleton-stack" data-skeleton-placeholder aria-hidden="true" hidden>
      <div class="skeleton-person">
        <span class="skeleton-shape avatar"></span>
        <div class="skeleton-stack">
          <span class="skeleton-shape line medium"></span
          ><span class="skeleton-shape line short"></span>
        </div>
      </div>
      <span class="skeleton-shape line"></span><span class="skeleton-shape line medium"></span>
    </div>
    <div data-skeleton-content>
      <div class="skeleton-person">
        <span class="avatar" aria-hidden="true">AF</span>
        <div>
          <h3>Andrea Flores</h3>
          <p>Administradora del espacio</p>
        </div>
      </div>
      <p class="demo-inline-output">andrea@example.com · Ciudad de México</p>
      <p class="demo-inline-output">Cuenta verificada y lista para trabajar.</p>
    </div>
  </div>
  <output class="demo-inline-output" data-skeleton-status role="status">Contenido listo.</output>
</section>

Cards de métricas

Skeleton reutilizable

Reserva el espacio de etiquetas, valores y variaciones.

Ingresos

$8,500

+3.78% este mes

Ahorro

$2,000

Meta al 65%

Balance

$12,000

Disponible hoy

Contenido listo.
Ver y copiar HTML 
<!-- INICIO: Skeleton Cards de métricas -->
<section
  id="skeleton-metrics"
  class="panel demo-card"
  data-component="skeleton-metrics"
  data-skeleton-demo
>
  <div class="panel-heading">
    <h2>Cards de métricas</h2>
    <span class="tag">Skeleton reutilizable</span>
  </div>
  <p class="demo-description">Reserva el espacio de etiquetas, valores y variaciones.</p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-skeleton-start>Probar skeleton</button
    ><button class="btn outline" type="button" data-skeleton-cancel hidden>Cancelar</button>
  </div>
  <div class="skeleton-demo-region" data-skeleton-region aria-busy="false">
    <div class="skeleton-stack" data-skeleton-placeholder aria-hidden="true" hidden>
      <div class="skeleton-metrics">
        <div class="skeleton-metric skeleton-stack">
          <span class="skeleton-shape line medium"></span><span class="skeleton-shape title"></span
          ><span class="skeleton-shape line short"></span>
        </div>
        <div class="skeleton-metric skeleton-stack">
          <span class="skeleton-shape line medium"></span><span class="skeleton-shape title"></span
          ><span class="skeleton-shape line short"></span>
        </div>
        <div class="skeleton-metric skeleton-stack">
          <span class="skeleton-shape line medium"></span><span class="skeleton-shape title"></span
          ><span class="skeleton-shape line short"></span>
        </div>
      </div>
    </div>
    <div data-skeleton-content>
      <div class="skeleton-metrics">
        <article class="skeleton-metric">
          <p>Ingresos</p>
          <strong>$8,500</strong>
          <p>+3.78% este mes</p>
        </article>
        <article class="skeleton-metric">
          <p>Ahorro</p>
          <strong>$2,000</strong>
          <p>Meta al 65%</p>
        </article>
        <article class="skeleton-metric">
          <p>Balance</p>
          <strong>$12,000</strong>
          <p>Disponible hoy</p>
        </article>
      </div>
    </div>
  </div>
  <output class="demo-inline-output" data-skeleton-status role="status">Contenido listo.</output>
</section>

Tabla de registros

Skeleton reutilizable

Filas y columnas antes de que aparezca el directorio.

PersonaÁreaEstado
Andrea FloresDiseñoActivo
Luis DíazProductoActivo
María LópezSoporteActivo
Contenido listo.
Ver y copiar HTML 
<!-- INICIO: Skeleton Tabla de registros -->
<section
  id="skeleton-table"
  class="panel demo-card"
  data-component="skeleton-table"
  data-skeleton-demo
>
  <div class="panel-heading">
    <h2>Tabla de registros</h2>
    <span class="tag">Skeleton reutilizable</span>
  </div>
  <p class="demo-description">Filas y columnas antes de que aparezca el directorio.</p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-skeleton-start>Probar skeleton</button
    ><button class="btn outline" type="button" data-skeleton-cancel hidden>Cancelar</button>
  </div>
  <div class="skeleton-demo-region" data-skeleton-region aria-busy="false">
    <div class="skeleton-stack" data-skeleton-placeholder aria-hidden="true" hidden>
      <div class="skeleton-stack">
        <div class="skeleton-table-row">
          <span class="skeleton-shape line"></span><span class="skeleton-shape line"></span
          ><span class="skeleton-shape line"></span>
        </div>
        <div class="skeleton-table-row">
          <span class="skeleton-shape line"></span><span class="skeleton-shape line"></span
          ><span class="skeleton-shape line"></span>
        </div>
        <div class="skeleton-table-row">
          <span class="skeleton-shape line"></span><span class="skeleton-shape line"></span
          ><span class="skeleton-shape line"></span>
        </div>
        <div class="skeleton-table-row">
          <span class="skeleton-shape line"></span><span class="skeleton-shape line"></span
          ><span class="skeleton-shape line"></span>
        </div>
      </div>
    </div>
    <div data-skeleton-content>
      <div class="skeleton-table-row">
        <strong>Persona</strong><strong>Área</strong><strong>Estado</strong>
      </div>
      <div class="skeleton-table-row">
        <span>Andrea Flores</span><span>Diseño</span><span>Activo</span>
      </div>
      <div class="skeleton-table-row">
        <span>Luis Díaz</span><span>Producto</span><span>Activo</span>
      </div>
      <div class="skeleton-table-row">
        <span>María López</span><span>Soporte</span><span>Activo</span>
      </div>
    </div>
  </div>
  <output class="demo-inline-output" data-skeleton-status role="status">Contenido listo.</output>
</section>

Lista de actividad

Skeleton reutilizable

Combina iconos y líneas con diferentes anchos.

Reporte mensual listo

Hace 5 minutos

Nuevo colaborador agregado

Hace 30 minutos

Presupuesto actualizado

Hace 1 hora

Contenido listo.
Ver y copiar HTML 
<!-- INICIO: Skeleton Lista de actividad -->
<section
  id="skeleton-list"
  class="panel demo-card"
  data-component="skeleton-list"
  data-skeleton-demo
>
  <div class="panel-heading">
    <h2>Lista de actividad</h2>
    <span class="tag">Skeleton reutilizable</span>
  </div>
  <p class="demo-description">Combina iconos y líneas con diferentes anchos.</p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-skeleton-start>Probar skeleton</button
    ><button class="btn outline" type="button" data-skeleton-cancel hidden>Cancelar</button>
  </div>
  <div class="skeleton-demo-region" data-skeleton-region aria-busy="false">
    <div class="skeleton-stack" data-skeleton-placeholder aria-hidden="true" hidden>
      <div class="skeleton-list">
        <div class="skeleton-task">
          <span class="skeleton-shape avatar"></span>
          <div class="skeleton-stack">
            <span class="skeleton-shape line medium"></span
            ><span class="skeleton-shape line short"></span>
          </div>
        </div>
        <div class="skeleton-task">
          <span class="skeleton-shape avatar"></span>
          <div class="skeleton-stack">
            <span class="skeleton-shape line medium"></span
            ><span class="skeleton-shape line short"></span>
          </div>
        </div>
        <div class="skeleton-task">
          <span class="skeleton-shape avatar"></span>
          <div class="skeleton-stack">
            <span class="skeleton-shape line medium"></span
            ><span class="skeleton-shape line short"></span>
          </div>
        </div>
      </div>
    </div>
    <div data-skeleton-content>
      <div class="skeleton-list">
        <article class="skeleton-task">
          <span class="demo-badge" aria-hidden="true">✓</span>
          <div>
            <h3>Reporte mensual listo</h3>
            <p class="muted">Hace 5 minutos</p>
          </div>
        </article>
        <article class="skeleton-task">
          <span class="demo-badge" aria-hidden="true">✓</span>
          <div>
            <h3>Nuevo colaborador agregado</h3>
            <p class="muted">Hace 30 minutos</p>
          </div>
        </article>
        <article class="skeleton-task">
          <span class="demo-badge" aria-hidden="true">✓</span>
          <div>
            <h3>Presupuesto actualizado</h3>
            <p class="muted">Hace 1 hora</p>
          </div>
        </article>
      </div>
    </div>
  </div>
  <output class="demo-inline-output" data-skeleton-status role="status">Contenido listo.</output>
</section>

Gráfica y resumen

Skeleton reutilizable

Anticipa los ejes y las barras con la misma estructura visual.

Ingresos de mayo a octubre

Datos ilustrativos del último semestre.

Contenido listo.
Ver y copiar HTML 
<!-- INICIO: Skeleton Gráfica y resumen -->
<section
  id="skeleton-chart"
  class="panel demo-card"
  data-component="skeleton-chart"
  data-skeleton-demo
>
  <div class="panel-heading">
    <h2>Gráfica y resumen</h2>
    <span class="tag">Skeleton reutilizable</span>
  </div>
  <p class="demo-description">Anticipa los ejes y las barras con la misma estructura visual.</p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-skeleton-start>Probar skeleton</button
    ><button class="btn outline" type="button" data-skeleton-cancel hidden>Cancelar</button>
  </div>
  <div class="skeleton-demo-region" data-skeleton-region aria-busy="false">
    <div class="skeleton-stack" data-skeleton-placeholder aria-hidden="true" hidden>
      <span class="skeleton-shape line medium"></span>
      <div class="skeleton-chart">
        <span class="skeleton-shape"></span><span class="skeleton-shape"></span
        ><span class="skeleton-shape"></span><span class="skeleton-shape"></span
        ><span class="skeleton-shape"></span><span class="skeleton-shape"></span>
      </div>
      <span class="skeleton-shape line short"></span>
    </div>
    <div data-skeleton-content>
      <h3>Ingresos de mayo a octubre</h3>
      <div
        class="skeleton-chart loaded"
        role="img"
        aria-label="Gráfica de ejemplo: mayo 4500, junio 7800, julio 6000, agosto 4500, septiembre 7800 y octubre 6000 pesos."
      >
        <span></span><span></span><span></span><span></span><span></span><span></span>
      </div>
      <p class="demo-inline-output">Datos ilustrativos del último semestre.</p>
    </div>
  </div>
  <output class="demo-inline-output" data-skeleton-status role="status">Contenido listo.</output>
</section>

Formulario y campos

Skeleton reutilizable

Simula la espera de los valores antes de habilitar un formulario.

Formulario de demostración: no envía datos.

Contenido listo.
Ver y copiar HTML 
<!-- INICIO: Skeleton Formulario y campos -->
<section
  id="skeleton-form"
  class="panel demo-card"
  data-component="skeleton-form"
  data-skeleton-demo
>
  <div class="panel-heading">
    <h2>Formulario y campos</h2>
    <span class="tag">Skeleton reutilizable</span>
  </div>
  <p class="demo-description">Simula la espera de los valores antes de habilitar un formulario.</p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-skeleton-start>Probar skeleton</button
    ><button class="btn outline" type="button" data-skeleton-cancel hidden>Cancelar</button>
  </div>
  <div class="skeleton-demo-region" data-skeleton-region aria-busy="false">
    <div class="skeleton-stack" data-skeleton-placeholder aria-hidden="true" hidden>
      <div class="demo-grid two">
        <div class="skeleton-stack">
          <span class="skeleton-shape line short"></span><span class="skeleton-shape field"></span>
        </div>
        <div class="skeleton-stack">
          <span class="skeleton-shape line short"></span><span class="skeleton-shape field"></span>
        </div>
        <div class="skeleton-stack">
          <span class="skeleton-shape line short"></span><span class="skeleton-shape field"></span>
        </div>
        <div class="skeleton-stack">
          <span class="skeleton-shape line short"></span><span class="skeleton-shape field"></span>
        </div>
      </div>
      <span class="skeleton-shape action"></span>
    </div>
    <div data-skeleton-content>
      <form class="demo-form" data-skeleton-form>
        <div class="demo-grid two">
          <label>Nombre<input class="demo-input" value="Andrea" /></label
          ><label>Apellido<input class="demo-input" value="Flores" /></label
          ><label>Correo<input class="demo-input" type="email" value="andrea@example.com" /></label
          ><label>Área<input class="demo-input" value="Diseño" /></label>
        </div>
        <p class="muted">Formulario de demostración: no envía datos.</p>
      </form>
    </div>
  </div>
  <output class="demo-inline-output" data-skeleton-status role="status">Contenido listo.</output>
</section>

Cómo usar estos skeletons en JavaScript

Sin biblioteca

Copia cualquier sección HTML de esta pantalla junto con skeleton.css y skeleton.js. El controlador encuentra los bloques con data-skeleton-demo, por lo que puedes conservar solo los ejemplos que necesites. Usa identificadores únicos si duplicas una card. Los selectores globales son opcionales: sin ellos la demostración dura 4 segundos. Para operaciones reales, usa KCSkeleton.start con el id de tu sección y llama al cierre en finally. No inicialices el script dos veces.

Archivo: assets/js/skeleton.js. Todo el contenido de las cards está escrito en HTML.

Ver archivos necesarios y orden de carga 
<script src="../assets/js/theme.js"></script>
<link rel="stylesheet" href="../assets/css/tailwind.css" />
<link rel="stylesheet" href="../assets/css/styles.css" />
<link rel="stylesheet" href="../assets/css/video.css" />
<link rel="stylesheet" href="../assets/css/appearance.css" />
<script defer="" src="../assets/js/shared.js"></script>
<script defer="" src="../assets/js/ui.js"></script>
<script defer="" src="../assets/js/appearance.js"></script>
<script defer="" src="../assets/js/components.js"></script>
<link rel="stylesheet" href="../assets/css/components.css" />
<link rel="stylesheet" href="../assets/css/skeleton.css" />
<script defer src="../assets/js/skeleton.js"></script>
Ver y copiar JavaScript 
// Reusable skeleton controller. Each demo keeps its placeholder and real content in HTML.
// const stop = KCSkeleton.start("skeleton-profile"); try { await operation(); } finally { stop(); }
(() => {
  const demos = [...document.querySelectorAll("[data-skeleton-demo]")];
  const active = new Map();
  const style = document.querySelector("#skeleton-animation");
  const duration = document.querySelector("#skeleton-duration");
  function start(id, { duration: milliseconds } = {}) {
    const demo = demos.find((element) => element.id === id);
    if (!demo) throw new Error("Skeleton desconocido: " + id);
    if (active.has(id)) return active.get(id);
    const placeholder = demo.querySelector("[data-skeleton-placeholder]");
    const content = demo.querySelector("[data-skeleton-content]");
    const status = demo.querySelector("[data-skeleton-status]");
    const button = demo.querySelector("[data-skeleton-start]");
    const cancel = demo.querySelector("[data-skeleton-cancel]");
    const region = demo.querySelector("[data-skeleton-region]");
    let timer;
    let finished = false;
    function stop(reason = "complete") {
      if (finished) return;
      finished = true;
      clearTimeout(timer);
      active.delete(id);
      placeholder.hidden = true;
      content.hidden = false;
      region.setAttribute("aria-busy", "false");
      button.disabled = false;
      const restoreFocus = cancel === document.activeElement;
      cancel.hidden = true;
      status.textContent =
        reason === "cancel" ? "Carga cancelada. Contenido restaurado." : "Contenido cargado.";
      if (restoreFocus) button.focus({ preventScroll: true });
    }
    active.set(id, stop);
    content.hidden = true;
    placeholder.hidden = false;
    region.setAttribute("aria-busy", "true");
    status.textContent = "Cargando...";
    button.disabled = true;
    cancel.hidden = false;
    if (Number.isFinite(milliseconds) && milliseconds > 0) timer = setTimeout(stop, milliseconds);
    return stop;
  }
  window.KCSkeleton = Object.freeze({ start });
  if (style) {
    document.body.dataset.skeletonAnimation = style.value;
    style.addEventListener("change", () => {
      document.body.dataset.skeletonAnimation = style.value;
    });
  }
  demos.forEach((demo) => {
    demo
      .querySelector("[data-skeleton-start]")
      .addEventListener("click", () =>
        start(demo.id, { duration: Number(duration?.value || 4000) }),
      );
    demo
      .querySelector("[data-skeleton-cancel]")
      .addEventListener("click", () => active.get(demo.id)?.("cancel"));
  });
  document
    .querySelector("#skeleton-start-all")
    ?.addEventListener("click", () =>
      demos.forEach((demo) => start(demo.id, { duration: Number(duration?.value || 4000) })),
    );
  document
    .querySelector("#skeleton-cancel-all")
    ?.addEventListener("click", () => [...active.values()].forEach((stop) => stop("cancel")));
  window.addEventListener("pagehide", () => [...active.values()].forEach((stop) => stop("cancel")));
})();
© 2026 KC Finance Plantilla creada por Codar · Hecha para crecer contigo.● Todos los sistemas operativos

HAZLO TUYO

Apariencia

Tu espacio, a tu manera.

Modo de visualización
Tamaño de la interfaz

Amplía textos, botones y tarjetas. Se conserva entre pantallas.

Color de la plantilla

El acento se aplica al menú, botones y gráficas.

Fondo

Elige una base que acompañe tu color.

Se guarda en este navegador y en todas las pantallas.