Spinner Indicador de Carga
Introduction
El componente Spinner es un indicador circular animado que representa estados de espera activos. Excelente para transiciones rápidas, envíos de formularios y superposiciones de carga, se puede personalizar con rangos de escala explícitos y descripciones accesibles.
Usage
Puedes posicionar y configurar los spinners así:
1. Cargador en línea estándar
Un cargador predeterminado, ideal para indicar progreso del sistema en secciones, contenedores centrados o paneles laterales.
{
"type": "spinner",
"size": "md",
"label": "Loading..."
}
2. Cargador grande con acento
Presenta un seguimiento visual de gran escala, comúnmente usado como pieza central durante recargas de página completa o sincronizaciones iniciales del espacio de trabajo.
{
"type": "spinner",
"size": "lg",
"label": "Synchronizing data..."
}
3. Subindicador diminuto (cargador de botón/contextual)
Un cargador de tamaño pequeño usado en paneles de control densos o tarjetas de contexto compactas para implicar recarga individual de recursos.
{
"type": "spinner",
"size": "sm",
"label": "Connecting..."
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Escala de tamaño (size) | select | "md" | Controla el diámetro y grosor de línea del cargador circular. • Opciones: "xs", "sm", "md", "lg", "xl", "2xl". |
Etiqueta accesible (label) | string | - | Descripción alternativa anunciada por lectores de pantalla. Recomendado para cumplir normativas. |
Architecture Notes
- Accesible desde el inicio: Cada spinner compila con un envoltorio nativo
role="status"que contiene etiquetas solo para lectores de pantalla (class="sr-only"), asegurando que el progreso se anuncie correctamente. - Renderizado SVG puro: Las animaciones del spinner usan rutas vectoriales ligeras (
<svg>) rotadas vía keyframes CSS, sin dependencias pesadas ni imágenes estáticas. - Tamaño de diseño óptimo: Las escalas de tamaño corresponden exactamente a los tokens de espaciado del sistema de diseño, garantizando alineación en botones, alertas o tarjetas.