/ loading-spinner

LoadingSpinner

@kumiki/components/loading-spinner

Compound <LoadingSpinner.Root> / <Label> — busy indicator wrapped in a polite role="status" live region; spinner glyph is consumer-supplied (ADR 0014).

Source

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createLoadingSpinner } from '@kumiki/headless/loading-spinner';
  const ctl = createLoadingSpinner({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components

Polite role="status" with label

<LoadingSpinner.Root>
  <LoadingSpinner.Label>Loading…</LoadingSpinner.Label>
</LoadingSpinner.Root>

Inline (label visually hidden)

<Button.Root loading>
  <LoadingSpinner.Root mode="inline">
    <LoadingSpinner.Label>Saving</LoadingSpinner.Label>
  </LoadingSpinner.Root>
  Save
</Button.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Inline busy indicator

<script lang="ts">
  import { Tailwind as Spinner } from '@kumiki/atelier/loading-spinner';
</script>

<Spinner.Root mode="inline" size="md">Saving…</Spinner.Root>

<!-- Region mode (announced as a polite live region): -->
<Spinner.Root mode="region" size="lg">Loading dashboard…</Spinner.Root>

This component, layer by layer

Keyboard

Test discipline