GET STARTED

Import

Import the canonical overlay and include the indicator directive only for a custom template.

import {
  NeuralLoadingIndicator,
  NeuralLoadingOverlay,
} from '@neural-ng/core/loading-overlay';

@Component({ imports: [NeuralLoadingOverlay] })

Container loading

Only projected content becomes busy and inert. The layer remains inside its component boundary.

Viewport loading

Native dialog top-layer behavior stays above fixed headers, locks document scroll and restores the trigger focus.

Custom indicator

Replace only the visual indicator while LoadingOverlay retains blocking, timing and status semantics.

Non-blocking background work

Set blockInteraction=false only when continued interaction is safe. Busy semantics remain active.

Flicker-safe timing

Busy state begins immediately. The default 150 ms delay hides short tasks; once visible, the overlay remains for at least 300 ms.

<neural-loading-overlay [active]="loading()" [delay]="150" [minimumDuration]="300" (shown)="onShown()" (hidden)="onHidden()" />

Unstyled and typed class slots

Structural positioning, timing, inert behavior and focus management remain while consumer classes own the visual layer.