Spinner | Neural Native

Importación

component.ts

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Tu equipo, tomando forma

Compara un estado de carga con el perfil que lo sustituye. La acción controla una vista previa local, sin simular una petición de red real.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuSpinnerComponent } from '@neural-ui/native/spinner';
import { NeuAvatarComponent } from '@neural-ui/native/avatar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuBadgeComponent, NeuSpinnerComponent, NeuAvatarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Tu equipo, tomando forma</text><text class="product-caption">La espera también forma parte de la tarea</text></view>
    <view class="product-surface">@if (loading()) { <view class="product-section"><neu-spinner label="Cargando el perfil del equipo" [showLabel]="true" size="small" /><text class="product-caption">Vista previa local del estado de carga</text></view> } @else { <view class="product-row"><neu-avatar label="Grace Hopper" size="lg" /><view class="product-copy"><text class="product-heading">Grace Hopper</text><text class="product-caption">Responsable de ingeniería</text></view></view><neu-badge label="Disponible para revisar" tone="success" /> }
    <view class="product-actions"><neu-button [label]="loading() ? 'Mostrar el perfil cargado' : 'Ver la carga otra vez'" size="sm" variant="outline" (pressed)="loading.set(!loading())" /></view></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly loading = signal(true);
}

Tamaño y estado

Muestra indicadores compactos y grandes con etiquetas de estado explícitas.

Ver y copiar el ejemplo completo

size-and-status.component.ts

import { Component } from '@angular/core';
import { NeuSpinnerComponent } from '@neural-ui/native/spinner';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuSpinnerComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <view class="usage-row"><neu-spinner label="Comprobando la conexión" [showLabel]="true" size="small" tone="info" /><neu-spinner label="Guardando el borrador" [showLabel]="true" size="large" tone="success" /></view>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Spinner · android · native capture — **Android**Captura nativa

Spinner · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	'Loading'	Input	Nombre legible del control, acción o grupo.
size	"small" \| "large"	'small'	Input	Tamaño visual con los valores exactos de la columna Tipo.
active	boolean	true	Input	Indica si el indicador de carga está animándose.
showLabel	boolean	false	Input	Muestra la etiqueta de carga junto al indicador.
tone	NeuTone	'brand'	Input	Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color.

Models

Este componente no declara models bidireccionales.

Outputs

Este componente no declara outputs públicos.

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';