---
titulo: Indicador de carga
resumen: Círculo que gira mientras una acción está en curso. Hereda el color y
  el tamaño del texto que acompaña.
estado: produccion
funcion: feedback
nivel: atomo
creado: 2026-10-11
actualizado: 2026-10-11
relacionados:
  - componentes/boton
plataformas:
  web:
    estado: produccion
    superficies:
      - id: portal
        fuente: src/components/ui/spinner.tsx
id: componentes/indicador-de-carga
url: /designloop/componentes/indicador-de-carga
sync: ok
---

# 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 preview superficie=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

| Fuente | Estado | Huella |
| --- | --- | --- |
| `src/components/ui/spinner.tsx` | Sincronizado | bf569f5623ab19b6 |