Todos los componentes (204)

Girador

Estado · Spinner · .amset-spinner

Qué es y cuándo usarlo

Girador de carga, para lo que tarda y no se sabe cuánto.

Cuándo usarlo

Cuando no hay porcentaje. Si se sabe cuánto queda, va Progress, que lo dice.
Dentro de un Center cuando ocupa una zona entera de la pantalla.
Con children envuelve un bloque: lo deja en gris e inerte, con el girador encima, mientras spinning siga en true.
delay (en milisegundos) para que no aparezca en las cargas cortas: un girador que sale y se va en un instante parpadea. visibleLabel escribe el nombre al lado.

Cuándo no

Mientras carga una lista o una ficha completa, casi siempre queda mejor Skeleton: enseña la forma de lo que viene en vez de un punto girando.
Dentro de un botón que envía no hace falta: Button ya trae loading.

Teclado: no participa.

Accesibilidad: label es obligatorio, y no por formalismo — un girador sin nombre es, para quien no lo ve, una pantalla que no hace nada. Es un progressbar indeterminado de verdad, no un <div> que da vueltas, así que el lector lo anuncia como ocupado. Con movimiento reducido NO se para: solo va más despacio (2,4 s la vuelta), porque un girador parado es un girador roto.

Aspecto fino: --amset-spinner-size, --amset-spinner-thickness, --amset-spinner-color y --amset-spinner-track.

Cómo se ve

Cargando pedidos

<Spinner label="Cargando pedidos" visibleLabel />
<Spinner label="Cargando" size="lg" tone="accent" />

Props

Se importa con import { Spinner } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que se esta cargando: «Cargando pedidos». Obligatorio, y no por formalismo: un girador sin nombre es, para quien no lo ve, una pagina que no hace nada.
`children`	`ReactNode`	Un bloque que se queda en gris con el girador encima mientras carga. Sin esto es el girador suelto de siempre.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`delay`	`number`	Milisegundos que tienen que pasar antes de que aparezca. Una carga de 120 ms con un girador que sale y se va es peor que no tener girador: parpadea. Con 200 o 300 solo se ve lo que de verdad tarda.
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	—
`spinning`	`boolean`	Solo con `children`: si el bloque esta cargando ahora. Por defecto, si.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`visibleLabel`	`boolean`	Enseña el texto al lado del girador. Por defecto va oculto a la vista — nunca al lector— porque casi siempre el contexto ya lo dice.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-spinner-size`	`1.25rem`
`--amset-spinner-thickness`	`2px`
`--amset-spinner-color`	`var(--amset-accent-text)`
`--amset-spinner-track`	`var(--amset-border)`

Cómo se cambia

.amset-spinner {
  --amset-spinner-size: ...;
  --amset-spinner-thickness: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: