Indicador de carga
Círculo que gira mientras una acción está en curso. Hereda el color y el tamaño del texto que acompaña.
Spinner, en src/components/ui/spinner.tsx. Solo existe en el portal.
tsx
import { Spinner } from '@/components/ui';
{pending ? <Spinner /> : <Send aria-hidden="true" />}Ejemplo
html · portal
<div style="display:flex;gap:16px;align-items:center" class="text-ink">
<svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity=".25" stroke-width="2.5"></circle><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path></svg>
<svg class="size-4 animate-spin text-muted" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity=".25" stroke-width="2.5"></circle><path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"></path></svg>
</div>Props
| Prop | Valores | Por defecto |
|---|---|---|
className |
Clases extra (tamaño o color) | size-4 |
Reglas
| Regla | Cómo se comprueba |
|---|---|
| Sustituye al icono de la acción mientras está en curso, en el mismo sitio. | En producción aparece en lugar del icono del botón (pending ? <Spinner /> : <Icono />). |
| Usa el color del texto. | Trazo en currentColor; el círculo de fondo al 25 %. |
| Es decorativo: el estado lo anuncia el control. | aria-hidden="true"; el botón de envío añade aria-busy. |
Antipatrones
- Indicador sin contexto: un círculo solo en mitad de la pantalla no dice qué se espera.
- Indicador además del icono: se cambia uno por otro; no van juntos.
Enlace con producción
| Superficie | Fuente | Estado | Huella | Revisada en |
|---|---|---|---|---|
| Portal de clientes | src/components/ui/spinner.tsx | Sincronizado | bf569f5623ab19b6 | 61df637 |
Producción en el commit 455e861 (2026-10-13). Sync del 2026-10-13.
Relacionados
componentes/indicador-de-carga · Actualizado el 2026-10-11