GET STARTED

Import

Import the standalone component from its granular entry point.

import {
  NeuralProgressSpinner,
  type NeuralProgressSpinnerClasses,
} from '@neural-ng/core/progress-spinner';

@Component({ imports: [NeuralProgressSpinner] })

Basic indeterminate progress

Use a spinner when work is active but its completion percentage is unknown.

Solid, multicolor, dynamic and dual

Solid keeps one semantic severity. Multicolor cycles through five semantic colors, while dynamicStroke grows and contracts the visible arc. Dual adds a counter-rotating inner ring and reverse flips both directions. Dual colors stay synchronized unless syncDualColor is disabled.

Semantic severities

Every severity follows the shared NeuralNg color contract, including runtime primary changes.

Sizes

Human-readable size values keep the public API framework-neutral and AI-friendly.

Labels and accessible naming

Visible text can describe the operation while ariaValueText supplies more specific assistive status.

Stroke and speed

Stroke width and rotation duration are normalized to safe ranges before rendering.

Unstyled and typed slots

Progress semantics and structural hooks remain while consumer classes own every visible decision.

Usage boundaries

Use ProgressSpinner for unknown-duration work, ProgressBar for measurable completion, and LoadingOverlay only when interaction must be blocked.

Indeterminate semantics

The root exposes role="progressbar" without invented aria-valuenow, min or max attributes.

Accessible names

ariaLabelledBy takes precedence over ariaLabel, then the explicit label, then the active locale's common loading message.

Value descriptions

ariaValueText can announce domain state such as �Waiting for approval� without forcing that copy into the visual layout.

Reduced motion

Under prefers-reduced-motion: reduce, rotation stops and a static arc continues to communicate activity visually.

Localization

An unlabeled spinner resolves its accessible name from NeuralLocaleService.messages().common.loading and updates with the active locale.

SSR and hydration

Signal normalization and locale resolution avoid browser globals, keeping server and client markup deterministic.

Inputs

Typed class slots

Public types

Legacy alias

ProgressSpinnerComponent remains compatible. New code should import NeuralProgressSpinner.

Layout and sizes

Surface

Color and severity

Label

Motion