Capa de carga.

Patrón canónico de capa de carga para todos los consumidores.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Nivel 1Componente canónico

Generando vista previa

Puedes cancelar sin perder tus cambios.

Nivel 2COCHID · variación

Validando archivo

Faltan cerca de 40 segundos para revisar las 6.842 filas.

Nivel 3Dentro de una página

Sitio · sección

Generando vista previa

Puedes cancelar sin perder tus cambios.

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<section class="ui-sample ui-loading-panel" data-loading-overlay="true" aria-busy="true" aria-live="polite"><span class="ui-spinner" aria-hidden="true"></span><div class="ui-loading-panel__copy"><strong>Generando vista previa</strong><p>Puedes cancelar sin perder tus cambios.</p></div><div class="ui-loading-panel__actions"><button class="btn btn--quiet" type="button">Cancelar</button></div></section>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Generando vista previa

Puedes cancelar sin perder tus cambios.

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

cochid.cl

COCHID

Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.md

Validando archivo

Faltan cerca de 40 segundos para revisar las 6.842 filas.

Cambia en esta marca

Cuadrado azul y namebrand de tres líneas
Azul COCHID en selección, capas y series

Permanece canónico

Estructura y semántica comunes
Fuentes, unidades y alternativa tabular

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Generando vista previa

Puedes cancelar sin perder tus cambios.

Usa HTML semántico, foco visible y estados explícitos.
Conserva contenido útil a 320 px y sin JavaScript.

Antes · problema observadoAnti-ejemplo no interactivo

EN LÍNEATodo funciona correctamenteSin señal, hora ni servicio asociado

No agregues sombras, radios ni franjas laterales decorativas.
No uses color, placeholder o icono como única explicación.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

320 pxMóvil y zoom

Generando vista previa

Puedes cancelar sin perder tus cambios.

1280 pxEscritorio

Validando archivo

Faltan cerca de 40 segundos para revisar las 6.842 filas.

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS · core/core-style
Consumidores	Todos los consumidores
Dependencias	HTML nativo, ARIA sólo cuando aporta
Estado	candidato

Evidencia de adopción

Patrón observado. 2 implementaciones observadas en 2 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón observado
Implementaciones	2 implementaciones observadas
Repositorios	cds/cis/cis-librospa, cochid/cochid-cables
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Capa de carga

Estados

Estado requerido
información
advertencia
error
éxito

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<section class="ui-sample ui-loading-panel" data-loading-overlay="true" aria-busy="true" aria-live="polite"><span class="ui-spinner" aria-hidden="true"></span><div class="ui-loading-panel__copy"><strong>Generando vista previa</strong><p>Puedes cancelar sin perder tus cambios.</p></div><div class="ui-loading-panel__actions"><button class="btn btn--quiet" type="button">Cancelar</button></div></section>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<section class="ui-sample ui-loading-panel border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-loading-overlay="true" aria-busy="true" aria-live="polite"><span class="ui-spinner" aria-hidden="true"></span><div class="ui-loading-panel__copy"><strong>Generando vista previa</strong><p>Puedes cancelar sin perder tus cambios.</p></div><div class="ui-loading-panel__actions"><button class="btn btn--quiet border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Cancelar</button></div></section>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

import type { MouseEventHandler } from "react";

export interface LoadingOverlayProps {
  /** Qué se está haciendo, en gerundio («Generando vista previa»). */
  title?: string;
  /** Qué pasa si se cancela o cuánto falta. */
  description?: string;
  /** Texto del botón que cancela la operación; vacío lo oculta. */
  cancelLabel?: string;
  /** Se llama al pulsar el botón de cancelar. */
  onCancel?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Panel de carga para una operación larga que se puede cancelar, como generar una vista previa o validar un archivo.
 *
 * La región lleva `aria-live="polite"` y `aria-busy="true"`; retira el panel cuando la operación termine. Sin `cancelLabel` no se muestra el botón de cancelar.
 *
 * @example <LoadingOverlay title="Generando vista previa" onCancel={cancelar} />
 * @example <LoadingOverlay title="Validando archivo" description="Faltan cerca de 40 segundos para revisar las 6.842 filas." cancelLabel="" />
 */
export function LoadingOverlay({
  title = "Generando vista previa",
  description = "Puedes cancelar sin perder tus cambios.",
  cancelLabel = "Cancelar",
  onCancel,
  className,
}: LoadingOverlayProps) {
  return (
    <section className={["ui-loading-panel", className].filter(Boolean).join(" ")} data-loading-overlay aria-busy="true" aria-live="polite">
      <span className="ui-spinner" aria-hidden="true"></span>
      {title || description ? (
        <div className="ui-loading-panel__copy">
          {title ? <strong>{title}</strong> : null}
          {description ? <p>{description}</p> : null}
        </div>
      ) : null}
      {cancelLabel ? (
        <div className="ui-loading-panel__actions">
          <button className="btn btn--quiet" type="button" onClick={onCancel}>{cancelLabel}</button>
        </div>
      ) : null}
    </section>
  );
}