NEURALNG
OVERLAYBETA

LoadingOverlay

Block a container or the complete viewport with flicker-safe timing, native top-layer behavior, focus restoration and customizable progress feedback.

Top-layer safeFlicker resistantSSR safe

GET STARTED

Import

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

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

Product workspace

The surrounding application remains untouched.

Last event: Waiting for a rendered lifecycle event.

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.

Neural workspace

Non-blocking background work

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

Live preview

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.

timing.html HTML 
<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.

Headless build surface