Overlay
Standalone dimming scrim and loading overlay layer, separate from dialog, with optional spinner and dismissable behavior.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controls visibility of the overlay. |
target | string | page | "page" for fixed full-screen or "parent" for absolute covering the nearest positioned ancestor. |
blur | boolean | — | Applies a backdrop-filter blur to the scrim. |
spinner | boolean | — | Centers a spinner animation inside the overlay. |
message | string | — | Text shown under the spinner. |
dismissable | boolean | — | Clicking the scrim closes the overlay and dispatches a close event. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/overlay.js"></script>import "./pura/lib/overlay.js";