Spinner.

Verlo por niveles

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

<div class="ui-sample ui-spinner-frame" data-spinner role="status"><span class="ui-spinner" aria-hidden="true"></span><span>Cargando resultados</span></div>

Variaciones por marca y sitio

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

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.

Antes / r19

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

Responsive

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

Cobertura

Evidencia de adopción

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

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

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 Spinner

Estados

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.

<div class="ui-sample ui-spinner-frame" data-spinner role="status"><span class="ui-spinner" aria-hidden="true"></span><span>Cargando resultados</span></div>

Código TAILWIND

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

<div class="ui-sample ui-spinner-frame border border-slate-300 bg-white p-4 text-slate-950" data-spinner role="status"><span class="ui-spinner" aria-hidden="true"></span><span>Cargando resultados</span></div>

Código REACT

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

export interface SpinnerProps {
  /** Qué se está esperando, en gerundio («Cargando resultados»); vacío omite el texto. */
  label?: string;
  className?: string;
}

/**
 * Indicador de carga con texto, para una espera breve cuyo avance no se puede medir.
 *
 * Usa `role="status"`. El círculo es decorativo (`aria-hidden`): el texto dice qué se espera. Si el avance se puede medir, usa `ProgressBar`.
 *
 * @example <Spinner label="Cargando resultados" />
 * @example <Spinner label="Reintentando conexión" />
 */
export function Spinner({ label = "Cargando resultados", className }: SpinnerProps) {
  return (
    <div className={["ui-spinner-frame", className].filter(Boolean).join(" ")} data-spinner role="status">
      <span className="ui-spinner" aria-hidden="true"></span>
      {label ? <span>{label}</span> : null}
    </div>
  );
}