Spinner
Indica que un proceso está en curso o que un contenido se está cargando, mediante un ícono animado sin texto.
- Indicar el procesamiento de una tarea sin avance medible: comunicar que una acción está en curso cuando no hay ningún porcentaje o valor de progreso real que mostrar. Ej.: guardar un cambio, eliminar un elemento o cargar los resultados de una búsqueda.
- Reemplazar el contenido de un control mientras ejecuta una acción: sustituir el ícono o el texto de un botón mientras dura la acción que dispara, para evitar que la persona repita el clic. Ej.: el botón "Guardar" mientras persiste los cambios de un formulario.
- Señalar la carga de una sección acotada: mostrar que el contenido de una card, un campo o un archivo adjunto todavía se está obteniendo, cuando ese contenido no tiene una estructura previsible para anticipar. Ej.: la carga de una imagen recién subida.
- Mostrar el avance medible de una tarea: cuando existe un porcentaje o un valor de progreso real que comunicar. En su lugar, usar Progress Bar. Ej.: la barra de subida de un archivo con su porcentaje completado.
- Anticipar la carga de una estructura conocida: representar por adelantado la forma del contenido que va a aparecer, en lugar de un ícono genérico sin relación con esa estructura. En su lugar, usar Skeleton. Ej.: la carga de una lista o una tabla completa.
- Comunicar el resultado final de una operación: un éxito, un error o una advertencia posterior al proceso. En su lugar, usar Toast.
Icon
Small (16 px): usar dentro de controles compactos, como un botón, donde el Spinner reemplaza a otro elemento pequeño. Ej.: el ícono de un botón mientras ejecuta la acción.
Medium (24 px): usar para indicar la carga de una sección acotada, como una card o un campo. Ej.: la carga de una imagen recién subida.
Large (32 px, valor por defecto): usar para indicar la carga de un área protagónica, como el contenido principal de una página o de un modal. Ej.: la carga inicial de un listado.
currentColor: hereda el color del texto o del ícono del elemento que contiene al Spinner; usarlo cuando reemplaza el contenido de un control, para no romper su paleta. Ej.: el ícono de un botón mientras ejecuta la acción.
primary-interactive (valor por defecto): usar en la mayoría de los contextos, cuando el Spinner aparece aislado sobre un fondo neutro. Ej.: la carga inicial de una card o de una sección.
neutral-background: usar cuando el Spinner se ubica sobre un fondo de color pleno, para que se distinga con contraste suficiente. Ej.: el Spinner dentro de un botón con apariencia primary mientras guarda un cambio.
danger-interactive: usar cuando el proceso está asociado a una acción destructiva o de riesgo. Ej.: el Spinner que reemplaza el ícono de un botón "Eliminar" mientras se ejecuta.
success-interactive: usar cuando el proceso está asociado a un contexto positivo o de confirmación. Ej.: el Spinner dentro de una acción de aprobación mientras se confirma.
El Spinner acompaña procesos breves que no requieren anticipar una estructura: dentro de un botón, reemplazando su ícono o su texto mientras se ejecuta la acción; centrado dentro de una card, un campo o un modal, mientras se obtiene su contenido; o aislado en el área principal de una página, durante una carga inicial breve.
Editar categoría
Reemplazar el contenido del botón por el Spinner con color="currentColor" mientras la acción está en curso, y deshabilitar la interacción.
Evitar mostrar el Spinner junto al texto del botón sin remplazarlo: duplica la señal de carga y desalinea el contenido.
Eliminando cliente…
Usar el Spinner dentro de un Toast type="progress" para indicar que un proceso sigue en curso, sin resultado de éxito o error todavía.
Evitar usar el Spinner para representar la carga de una lista o una tabla completa: en su lugar, anticipar su estructura con Skeleton.
- Etiqueta accesible a cargo de quien lo implementa: el componente no incluye un aria-label por defecto; al no tener texto propio, hay que agregar role="img" y aria-label directamente en el SVG del Spinner (Ej.: aria-label="Cargando"), o proveer texto descriptivo dentro de una región role="status".
- No depende del foco ni del teclado: el Spinner es puramente informativo y no es interactivo; no recibe foco ni maneja eventos de teclado. Cuando acompaña a un control, como un botón, el estado de foco y de interacción los maneja ese control, no el Spinner.
- Contraste suficiente según el fondo: elegir un valor de color que se distinga con claridad del fondo donde se ubique. Ej.: neutral-background para un Spinner sobre una superficie de color pleno (primary-interactive, danger-interactive), o currentColor para heredar el color del elemento que reemplaza.
Instalá el componente vía terminal.
npm install @nimbus-ds/spinnerimport React from "react";
import { Spinner } from "@nimbus-ds/components";
const Example: React.FC = () => <Spinner size="large" />;
export default Example;Las propiedades adicionales se pasan al elemento <Spinner>. Consultá la documentación del elemento SVG para ver la lista de atributos aceptados.
- Skeleton — Para anticipar la estructura de un contenido conocido mientras carga, en lugar de un ícono genérico.
- Progress Bar — Para mostrar el avance medible de una tarea, cuando existe un porcentaje real que comunicar.
- Toast — Para comunicar el resultado final de una operación, una vez que el proceso terminó.
Spinner
| Name | Type | Default | Description |
|---|---|---|---|
size | 'large' | 'large' | Sets the width and height of the spinner. |
color | 'currentColor' | 'primary-interactive' | Set the color for the spinner SVG fill. |
Ayudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.