Blocks a region (or the viewport) with a spinner and optional message while work is in progress. Sets aria-busy on the host and a polite live region on the overlay. Prefer this over ply-spinner-wrapper when you need copy, scroll locking, or fullscreen.
Wrap the section that should dim. The overlay is positioned to the host.
Invoice #1842
Acme Corp — $1,240.00 due on the 24th. Click simulate to cover this card.
<ply-loading-overlay [visible]="saving()" message="Saving…"> <form>…</form> </ply-loading-overlay>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add loading-overlay
// Paths are relative to aliases.components (default: src/app/components)
import { LoadingOverlayComponent } from './loading-overlay/loading-overlay.component';
@Component({
selector: 'app-loading-overlay-example',
imports: [
LoadingOverlayComponent
],
template: `...`
})
export class LoadingOverlayExampleComponent {}Install
npx ply-ui-cli add loading-overlay
Run the following command to add this component to your project:
npx ply-ui-cli add loading-overlay
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add loading-overlay
// Paths are relative to aliases.components (default: src/app/components)
import { LoadingOverlayComponent } from './loading-overlay/loading-overlay.component';
@Component({
selector: 'app-your-component',
imports: [
LoadingOverlayComponent
],
template: `...`
})
export class YourComponent {} API for loading-overlay — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-loading-overlay | class | string | '' | Extra host classes merged via `cn()`. |
ply-loading-overlay | visible | boolean | false | Shows the blocking overlay. |
ply-loading-overlay | fullscreen | boolean | false | Cover the viewport instead of wrapping projected content. |
ply-loading-overlay | lockScroll | boolean | false | Set `overflow: hidden` on `document.body` while visible (typical for fullscreen). |
ply-loading-overlay | message | string | '' | Optional status text announced via a live region. |
ply-loading-overlay | size | SpinnerSize | 'lg' | Spinner diameter. |
ply-loading-overlay | color | SpinnerColor | 'primary' | Spinner color. Use `inverted` on a dark backdrop. |
Content