LoadingOverlay

Overlay

Loading overlay that overlays its parent content.

Props

Prop	Type	Default	Description
`visible`	`boolean`	`false`	Show or hide the overlay.
`label`	`string`	`undefined`	Text displayed below the spinner.
`blur`	`boolean`	`true`	Apply a blur effect to the content below.

Examples

Loading overlay

Content area

vue

<DsLoadingOverlay :visible="isLoading" label="Loading data…" :blur="true">
  <div class="p-6 rounded-ds-xl border border-ds-border bg-ds-bg space-y-3">
    <p class="text-sm text-ds-fg">Dashboard content</p>
    <p class="text-sm text-ds-fg-muted">This content is covered while loading.</p>
  </div>
</DsLoadingOverlay>

Skeleton

Use DsLoadingOverlaySkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsLoadingOverlaySkeleton />

Accessibility

aria-busy="true" and aria-live="polite" indicate loading state.

Context Menu

Modal