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. Defaults to CNGX_LOADING_CONFIG.showDelay.
this.loadingConfig.showDelayWhen 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. Defaults to CNGX_LOADING_CONFIG.minDwell.
this.loadingConfig.minDwellBind 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.
Derives from the --cngx-duration-fast rung of the motion scale; a
--cngx-duration-* brand override re-times it library-wide.
@relatedTo provideMotion, CngxMotionScope, injectMotion
*easeEasing curve of the overlay show/hide transition.