Spinner | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Your team, coming into focus

Compare a named loading state with the actual profile that replaces it. The action controls a local preview, so there is no pretend network request.

View and copy the complete example

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">Your team, coming into focus</text><text class="product-caption">Make waiting feel like part of the task</text></view>
    <view class="product-surface">@if (loading()) { <view class="product-section"><neu-spinner label="Loading team profile" [showLabel]="true" size="small" /><text class="product-caption">Local loading-state preview</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">Engineering lead</text></view></view><neu-badge label="Available for review" tone="success" /> }
    <view class="product-actions"><neu-button [label]="loading() ? 'Show loaded profile' : 'Preview loading again'" 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);
}

Size and status

Show compact and large indicators with explicit status labels.

View and copy the complete example

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="Checking connection" [showLabel]="true" size="small" tone="info" /><neu-spinner label="Saving draft" [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 {

}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Spinner · android · native capture — **Android**Native screenshot

Spinner · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	'Loading'	Input	Human-readable name for the control, action or group.
size	"small" \| "large"	'small'	Input	Visual size using the exact values shown in the type column.
active	boolean	true	Input	Whether the loading indicator is animating.
showLabel	boolean	false	Input	Displays the loading label alongside the indicator.
tone	NeuTone	'brand'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.

Models

This component declares no two-way models.

Outputs

This component declares no public outputs.

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

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';