Spinner

• 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.

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.

• 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.

El Spinner no tiene texto visible: su único texto es el aria-label, que describe el proceso en curso para tecnologías asistivas.

• Texto accesible explícito, siempre: el componente no tiene texto visible propio. Agregar role="img" con un aria-label descriptivo en el SVG, o un texto descriptivo dentro de una región role="status". Sin ninguno de los dos, es inaccesible.
• Verbo en gerundio con objeto: cuando se use aria-label, describir la acción en curso con su contexto, siempre con objeto cuando sea posible. "Cargando productos", no "Cargando".
• Conciso: una o dos palabras con objeto alcanza.
• Un solo spinner por grupo de procesos relacionados: si varias tareas relacionadas corren en paralelo, mostrar un único spinner que represente al grupo. Zonas de carga independientes y no relacionadas (por ejemplo, cards separadas) pueden tener cada una su propio spinner.
• Cuándo mostrarlo: solo si la espera supera 1 segundo. Para esperas más cortas, el cambio de estado ya es suficiente.

Instalá el componente vía terminal.

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