Spinner

Indica que sigue en curso una operación cuyo progreso se desconoce.

Categoría: Estados y avisos
Import: @neural-ui/core/spinner
Selector: neu-spinner

import { NeuSpinnerComponent } from '@neural-ui/core/spinner';

Uso

Utiliza Spinner cuando no existe un porcentaje significativo. label añade texto visible; cuando está vacío, ariaLabel aporta el texto para lectores de pantalla. tone define el color semántico del arco y color no vacío lo sustituye. size y strokeWidth controlan la geometría; animationDuration controla la rotación, no la animación independiente del arco. La aplicación controla la carga.

Ejemplos

Prueba la interacción y abre Código para ver la implementación. Reiniciar restablece el estado inicial.

Pedidos

Los pedidos todavía no están disponibles.

Cargando pedidos

Prueba y configura

Cambia las opciones y consulta la vista previa y el template generado. Código contiene el ejemplo ejecutable completo.

Vista previa

Cargando pedidos

Etiqueta visible

Etiqueta accesible (sin etiqueta visible)

Template generado: refleja las opciones anteriores. Abre Código para ver los imports y el estado completos.

<neu-spinner
  tone="brand"
  size="40px"
  strokeWidth="4"
  animationDuration="1s"
  label="Cargando pedidos"
  ariaLabel="Cargando pedidos"
  color=""
/>

Datos y contenido

Todas las propiedades son Inputs. Spinner no tiene Outputs ni templates y no inicia ni completa la operación. Sustitúyelo cuando la aplicación termine de cargar.

Accesibilidad y teclado

Spinner es un estado no intrusivo, no una barra de progreso. Describe la operación en vez de decir únicamente Cargando. Mantén el estado fuera de la región de contenido aria-busy para que se pueda anunciar. El movimiento reducido detiene la rotación y la animación del arco sin ocultar el indicador.

Tecla	Acción
`—`	Spinner es un estado no intrusivo, no una barra de progreso. Describe la operación en vez de decir únicamente Cargando. Mantén el estado fuera de la región de contenido aria-busy para que se pueda anunciar. El movimiento reducido detiene la rotación y la animación del arco sin ocultar el indicador.

API

Los Inputs y Outputs se extraen del paquete fijado. Los tipos con nombre enlazan a sus definiciones; Templates enumera solo las zonas de proyección disponibles.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`animationDuration`	`string`	`'1s'`	`[animationDuration]`	Duración CSS de la rotación del SVG; la animación del arco es independiente.
`ariaLabel`	`string`	`'Loading...'`	`[ariaLabel]`	Texto para lectores de pantalla cuando label está vacío.
`color`	`string`	`''`	`[color]`	Color CSS opcional del arco que sustituye tone.
`label`	`string`	`''`	`[label]`	Texto de estado visible; sustituye el texto oculto ariaLabel.
`size`	`string`	`'40px'`	`[size]`	Ancho y alto CSS del SVG.
`strokeWidth`	`string`	`'4'`	`[strokeWidth]`	Grosor del trazo SVG como cadena numérica.
`tone`	`NeuSpinnerTone`	`'brand'`	`[tone]`	Color semántico del arco si color está vacío.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuSpinnerToneTypeScript

import type { NeuSpinnerTone } from '@neural-ui/core/spinner';

// Declaración pública (solo referencia)
export type NeuSpinnerTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

Estilos y tokens

Utiliza los Inputs públicos y los tokens de superficie, texto, espaciado y color semántico de Core. Mantén el contenido adaptable y comprueba ambos temas.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-info`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-space-2`	Separación entre contenido y controles	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0.5rem`
`--neu-success`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#15803d`
`--neu-text-sm`	Tamaño del texto	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0.875rem`