LoadingOverlay

A full-screen loading overlay for async operations. Shows progress, completed items, and error states with a blurred backdrop.

Installation

typescript

import { LoadingOverlay } from '@happyvertical/smrt-svelte';

Basic Usage

Show a simple loading overlay during async operations.

svelte

<script lang="ts">
  import { LoadingOverlay } from '@happyvertical/smrt-svelte';

  let loading = $state(false);

  async function fetchData() {
    loading = true;
    await doSomething();
    loading = false;
  }
</script>

<LoadingOverlay show={loading} message="Loading data..." />
<button onclick={fetchData}>Fetch Data</button>

With Progress

Show progress percentage for longer operations.

svelte

<script lang="ts">
  import { LoadingOverlay } from '@happyvertical/smrt-svelte';

  let progress = $state(0);
  let loading = $state(false);

  async function uploadFiles() {
    loading = true;
    for (let i = 0; i <= 100; i += 10) {
      progress = i;
      await new Promise(r => setTimeout(r, 200));
    }
    loading = false;
  }
</script>

<LoadingOverlay
  show={loading}
  message="Uploading files..."
  progress={progress}
/>

With Completed Items

Show badges for completed steps.

svelte

<script lang="ts">
  import { LoadingOverlay } from '@happyvertical/smrt-svelte';

  let items = $state<string[]>([]);
  let loading = $state(false);

  async function processItems() {
    loading = true;
    items = [];
    for (const step of ['Validated', 'Processed', 'Saved']) {
      await new Promise(r => setTimeout(r, 500));
      items = [...items, step];
    }
    loading = false;
  }
</script>

<LoadingOverlay
  show={loading}
  message="Processing..."
  items={items}
/>

Error State

Display an error message when something goes wrong.

svelte

<LoadingOverlay
  show={true}
  message="Operation failed"
  error={{ message: 'Network connection lost. Please try again.' }}
  dismissible
  ondismiss={() => console.log('Dismissed')}
/>

Dismissible Overlay

Allow users to continue without waiting.

svelte

<LoadingOverlay
  show={loading}
  message="This may take a while..."
  dismissible
  ondismiss={() => {
    // User chose to continue
    loading = false;
  }}
/>

Props

Prop	Type	Default	Description
`show`	`boolean`	`false`	Whether to show the overlay
`message`	`string`	`'Loading...'`	Loading message to display
`progress`	`number`	`0`	Progress percentage (0-100)
`items`	`string[]`	`[]`	List of completed items to display
`error`	`{ message: string } \| null`	`null`	Error object with message
`dismissible`	`boolean`	`false`	Allow users to dismiss the overlay
`class`	`string`	`''`	Custom CSS class
`ondismiss`	`() => void`	`undefined`	Callback when overlay is dismissed

TypeScript

typescript

import { LoadingOverlay } from '@happyvertical/smrt-svelte';

interface LoadingOverlayProps {
  show?: boolean;
  message?: string;
  progress?: number;
  items?: string[];
  error?: { message: string } | null;
  dismissible?: boolean;
  class?: string;
  ondismiss?: () => void;
}

Accessibility

Uses role="dialog" with aria-modal="true"
Loading message is announced via aria-labelledby
Backdrop has blur effect for focus on content