CngxLoadingIndicator
projects/ui/feedback/loading/loading-indicator.ts
Import#
import { CngxLoadingIndicator } from '@cngx/ui/feedback'
Description#
Loading indicator atom - purely visual, blocks no interaction.
Two variants:
spinner- rotating circle, inline or centeredbar- thin line at the top of the container (YouTube-style)
Timing (defaults from CNGX_LOADING_CONFIG):
delay(default 120ms): operations faster than this never show the indicatorminDwell(default 400ms): once visible, stays for at least this long
For content-blocking overlays, use cngx-loading-overlay instead.
With async state
<cngx-loading-indicator [state]="residents" variant="bar" />Manual boolean
<cngx-loading-indicator [loading]="isLoading()" label="Fetching data" />Metadata#
Host#
Relationships
Used by3
Depends on1
Index#
Inputs#
Delay in ms before showing the indicator. Defaults to CNGX_LOADING_CONFIG.showDelay.
this.loadingConfig.showDelayMinimum display time in ms once visible. Defaults to CNGX_LOADING_CONFIG.minDwell.
this.loadingConfig.minDwellBind an async state - shows indicator when isBusy().
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-loading-indicator--visible] | visible() |
[class.cngx-loading-indicator--spinner] | variant() === "spinner" |
[class.cngx-loading-indicator--bar] | variant() === "bar" |
[attr.role] | "status" |
[attr.aria-label] | visible() ? label() : null |
[attr.aria-busy] | isActive() || null |
Default visuals for CngxLoadingIndicator. The host carries
.cngx-loading-indicator and renders either __spinner (with
nested __spinner-track + __spinner-arc SVG paths) or __bar
(with nested __bar-fill). Keyframes (cngx-spin,
cngx-bar-indeterminate, cngx-pulse) stay top-level outside
@layer because they are already namespaced.
Variants
- default - circular SVG spinner,
cngx-spin360deg rotation --bar- block-level indeterminate progress bar with a 40% fill sweep viacngx-bar-indeterminate
Under prefers-reduced-motion both variants swap to a slow
opacity pulse (cngx-pulse); the bar variant additionally pins
width: 100% so the static fill reads as a track-fill rather
than a stuck partial sweep.
Slots
.cngx-loading-indicator__spinner-track- background ring stroke (--cngx-loading-indicator-track).cngx-loading-indicator__spinner-arc- active arc stroke (--cngx-loading-indicator-color).cngx-loading-indicator__bar- bar track (same track token).cngx-loading-indicator__bar-fill- bar fill (same active token)
Index#
Layout
Surface
<color>oklch(0 0 0 / 0.1)Track color of the spinner ring and the indeterminate bar.
*currentColorStroke / fill color of the active indicator.
Motion
<time>2sOpacity-pulse duration used as the reduced-motion fallback.