Loading Overlay
A translucent, blurred backdrop with a centred spinner and optional label, covering a panel or the whole page.
$
Registry itembunx shadcn@latest add @nx-ui/loading-overlayPanel overlay
Covers its nearest positioned ancestor. Trigger it to see the blur settle over the card.
Soil carbon summary
Aggregated across 12 registered sites in the North catchment.
- Baseline
- 32.1 tC/ha
- Latest
- 36.8 tC/ha
Static, with label
Always-on for illustration.
Syncing movements…
Spinner only
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | true | When false, the overlay is not rendered. |
label | React.ReactNode | — | Optional text shown beneath the spinner. |
fullscreen | boolean | false | Cover the viewport (`fixed`) instead of the parent container. |
spinnerClassName | string | — | — |
…extends React.ComponentProps<"div">