NEURALNG
FEEDBACKBETA

ProgressSpinner

Accessible indeterminate progress with semantic color, normalized motion, localized naming and complete visual ownership.

ARIA progressbarReduced-motion safeHeadless ready

GET STARTED

Import

Import the standalone component from its granular entry point.

app.ts TypeScript 
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.