@status-ink/svelte

Svelte 5 component and rune helper for animated status and progress text.

npm install @status-ink/svelte

<script lang="ts">
  import { StatusInk } from '@status-ink/svelte';
  import '@status-ink/svelte/style.css';

  let status = $state('Loading');
</script>

<StatusInk aria-live="polite" {status} />

Use autonomous fallback statuses when your application has no real progress updates yet:

<script lang="ts">
  import { StatusInk } from '@status-ink/svelte';
</script>

<StatusInk holdMs={2000} statuses={['Loading', 'Indexing', 'Ready']} />

Use useStatusInk(() => ({ status })) when you want to own the markup while retaining Svelte reactivity. The helper and component stop their active runner when their owning effect is disposed.

Reduced motion defaults to auto and follows prefers-reduced-motion. It preserves status changes while disabling effects and shimmer. Pass reducedMotion={true} or false to override it, and shimmer={false} to disable shimmer independently. Status text is quiet to assistive technology by default; opt into aria-live="polite" or "assertive" only for meaningful announcements.

Open the Svelte example in StackBlitz

Documentation · Live demo · Issues · npm