Spinner

Indicate that an operation with unknown progress is still running.

Category: Feedback and status
Import: @neural-ui/core/spinner
Selector: neu-spinner

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

Usage

Use Spinner when there is no meaningful percentage. label adds visible text; when label is empty, ariaLabel supplies screen-reader text. tone sets the semantic arc color, overridden by a non-empty color. size and strokeWidth control geometry; animationDuration controls rotation, not the separate arc animation. The application owns loading state.

Examples

Try the interaction and open Code for the implementation. Reset restores the initial state.

Orders

Orders are not available yet.

Loading orders

Try and configure

Change the options and inspect the preview and generated template. Code contains the full executable source.

Live preview

Loading orders

Visible label

Accessible label (no visible label)

Generated template: reflects the options above. Open Code for the complete imports and state.

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

Data and content

All properties are Inputs. Spinner has no Outputs or templates and does not start or complete the operation. Replace it when the application finishes loading.

Accessibility and keyboard

Spinner is a polite status, not a progressbar. Describe the operation instead of just saying Loading. Keep the status outside an aria-busy content region so it can be announced. Reduced motion stops rotation and arc animation while keeping the indicator visible.

Key	Action
`—`	Spinner is a polite status, not a progressbar. Describe the operation instead of just saying Loading. Keep the status outside an aria-busy content region so it can be announced. Reduced motion stops rotation and arc animation while keeping the indicator visible.

API

Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`animationDuration`	`string`	`'1s'`	`[animationDuration]`	CSS duration of SVG rotation; arc animation is independent.
`ariaLabel`	`string`	`'Loading...'`	`[ariaLabel]`	Screen-reader text used when label is empty.
`color`	`string`	`''`	`[color]`	Optional CSS arc color overriding tone.
`label`	`string`	`''`	`[label]`	Visible status text; replaces the hidden ariaLabel text.
`size`	`string`	`'40px'`	`[size]`	CSS width and height of the SVG.
`strokeWidth`	`string`	`'4'`	`[strokeWidth]`	SVG stroke width as a numeric string.
`tone`	`NeuSpinnerTone`	`'brand'`	`[tone]`	Semantic arc color when color is empty.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuSpinnerToneTypeScript

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

// Public declaration (reference only)
export type NeuSpinnerTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

Styles and tokens

Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-info`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-space-2`	Spacing between content and controls	Shared by other Core consumers; scope the override.	`0.5rem`
`--neu-success`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#15803d`
`--neu-text-sm`	Text size	Shared by other Core consumers; scope the override.	`0.875rem`