# Spinner Comunica que un proceso está en curso cuando no es posible mostrar progreso determinado. Úsalo para esperas cortas y acompáñalo de una etiqueta si la espera puede superar dos segundos. ```tsx import { Spinner } from "@fluentui/react-components"; ``` ## Default ### Cuándo usar - Operaciones cortas donde no puedes estimar progreso real. - Cargas dentro de un panel o sección, no para reemplazar toda la pantalla. - Confirmar al usuario que su acción se está procesando tras un clic. ### Cuándo no usarlo - Si conoces el porcentaje de avance: usa una progress bar. - Si la espera supera diez segundos: usa Skeleton o un estado vacío con mensaje. ## Tamaños ### Cuatro tamaños Elige el tamaño según el contenedor. Los más pequeños sirven dentro de botones o inputs; los más grandes para paneles vacíos o pantallas de carga. ```tsx ``` ## Con etiqueta ### Texto descriptivo Si la espera puede tardar, indica qué está pasando con una etiqueta debajo o al costado del spinner. ```tsx ``` ## Accesibilidad ### Texto para lectores - El Spinner expone role="progressbar"; si no muestras label visible, pasa aria-label o aria-labelledby. - Anuncia cambios de estado en una región aria-live polite cuando la carga termina. - No bloquees la interfaz completa con un spinner sin permitir cancelar.