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:
delay(default 200ms): operations faster than this never show the indicatorminDuration(default 500ms): 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
Index#
Inputs#
Delay in ms before showing the indicator. Falls back to global config, then 200ms.
this.config?.loadingDelay ?? 200Minimum display time in ms once visible. Falls back to global config, then 500ms.
this.config?.loadingMinDuration ?? 500Bind 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.