CngxLoadingOverlay
projects/ui/feedback/loading/loading-overlay.ts
Import#
import { CngxLoadingOverlay } from '@cngx/ui/feedback'
Description#
Loading overlay - content container that blocks interaction while loading.
Projects content inside a wrapper that receives inert during loading.
Renders a centered spinner over a semi-transparent backdrop.
Manages focus save/restore across the inert lifecycle.
Uses display: grid with a shared grid cell - backdrop and content
overlap naturally without position: absolute or display: contents.
With async state
<cngx-loading-overlay [state]="tableData">
<table>...</table>
</cngx-loading-overlay>Manual boolean
<cngx-loading-overlay [loading]="isSaving()">
<form>...</form>
</cngx-loading-overlay>First load only (refresh uses the container's built-in bar)
<cngx-loading-overlay [state]="query" [firstLoadOnly]="true">
<cngx-async-container [state]="query">...</cngx-async-container>
</cngx-loading-overlay>Metadata#
Relationships
Depends on1
Index#
Inputs#
Delay in ms before showing the overlay. Falls back to global config, then 200ms.
this.config?.loadingDelay ?? 200When true, the overlay only activates during the first load (isFirstLoad()),
not during refreshes. Use the async container's built-in refresh bar for
subsequent loads to avoid content jumps under the backdrop.
falseMinimum display time in ms once visible. Falls back to global config, then 500ms.
this.config?.loadingMinDuration ?? 500Bind an async state - shows overlay when isBusy().
Default visuals for CngxLoadingOverlay. The host carries
.cngx-loading-overlay and lays out its __content and
__backdrop children as a single-cell grid so the backdrop
stacks over the content; the backdrop centers a __spinner-wrapper
with its own focus-visible ring.
Slots
.cngx-loading-overlay__content- main content (grid area 1/1).cngx-loading-overlay__backdrop- scrim with centered spinner, z-ordered at--cngx-loading-overlay-z-index(default10); opacity fade respectsprefers-reduced-motion.cngx-loading-overlay__spinner-wrapper- focus target for the spinner with a circular focus ring on:focus-visible
Dark mode
Three hooks invert the translucent-white backdrop to translucent-
dark so the spinner stays visible over a dark page; the overlay
is a scrim, not a surface, so it does not delegate to
--cngx-color-surface:
prefers-color-scheme: dark[data-color-scheme="dark"].darkclass
Index#
Layout
<number>10Stacking-context order of the overlay above its content.
Surface
<color>oklch(1 0 0 / 0.5)Backdrop background - translucent white by default; override for dark themes.
Motion
<time>150msOpacity-fade transition duration for the overlay show/hide.
*easeEasing curve of the overlay show/hide transition.