3.6 KiB

Raw Blame History Unescape Escape

Spinner (eidos)

Fecha de revisión: 2026-07-10 (dossier S4, re-auditoría 2026-07-07).

Indicador de progreso indeterminado: <div role="status"> con glifo rotatorio CSS-only, para donde un <Progress> determinado es demasiado (petición en vuelo, dropdown async, transición de ruta). Primitivo eidos-native.

Morfo: morfo/components/spinner.ts.

Passive justification

0 eventos con la justificación in-place (header del morfo): como Skeleton, Spinner no emite commit/emerge/shift — es chrome perceptual puro que el consumidor desmonta al terminar el trabajo.

Baseline

Indicador clásico del catálogo con decisiones de theming ya auditadas: las tres variantes propias ring · dots · bars (§19), el keyframe spin anotado como funcional, y la opacidad cruda legítima documentada (§29 — los pasos de atenuación de dots/bars son geometría del indicador, no color de tema).

Superficie

<Spinner size="md" color="primary" />
<Spinner variant="dots" size="lg" />
<Button loading><Spinner variant="ring" size="sm" /></Button>

Props: variant (ring | dots | bars), size (xs–xl, responsive), color, presentation (rebaja a role="presentation" cuando otro elemento ya anuncia la carga — p. ej. dentro de un Button con aria-busy), aria-label (override del localizado "Loading").

Comparativa

Capacidad	UIX	Chakra	Mantine	Radix Themes	MUI
Variantes de glifo	✓ (ring/dots/bars)	1 (ring)	3 (oval/bars/dots)	1	1 (+determinate)
`role="status"` + label localizado	✓	Manual	No	No	No
Opt-out de anuncio (`presentation`)	✓	No	No	No	No
CSS-only (sin JS de animación)	✓	✓	✓	✓	SVG+CSS
Tallas responsive	✓	✓	✓	✓	`size` px

Referencias: Chakra Spinner · Mantine Loader · Radix Themes Spinner · MUI CircularProgress.

Decisiones

presentation para no anunciar dos veces: dentro de un Button en loading (que ya lleva aria-busy), el spinner baja a role="presentation" — un solo anuncio por estado, decidido por el contexto que lo compone.
El keyframe spin es FUNCIONAL (anotado): periodo de rotación constante — no entra en la doctrina de animación perceptual (no es señal de evento, es estado sostenido).
Opacidades crudas legítimas (§29): los pasos de atenuación entre dots/bars son geometría del glifo (qué segmento "va delante"), no roles de color del tema.
Indeterminado a propósito: el progreso con valor pertenece a <Progress>/<Meter> — Spinner nunca acepta value.

Gaps

Gap	Disposición	Detalle
Chips de la demo desalineados con las unions (`D-7.4` — regla de demo)	implementar (pase de demos, no S4)	Realinear a demos computadas-desde-tipos (con combobox — ficha F-2).
Velocidad de rotación configurable	descartar	El periodo funcional es constante por diseño; variarlo no añade significado.
Variante con label visible integrado	diferir	Componer `<Spinner /> <Text>` cubre el caso; slot propio espera demanda.

Referencias

Hermanos de feedback: ../skeleton/README.md · ../progress/
Consumidor canónico: ../button/README.md (spinner de loading)
Ficha de auditoría: docs/audit/components/spinner.md

3.6 KiB Raw Blame History Unescape Escape