Spinner

Installation

pnpm dlx @mielui/svelte add spinner

npx @mielui/svelte add spinner

yarn dlx @mielui/svelte add spinner

bunx @mielui/svelte add spinner

Usage

Success and exit feedback use the shared motion duration for opacity, scale, and rotation. Reduced motion removes transitions and continuous rotation. Rotation also pauses when the theme disables motion, the indicator leaves view, or the page is hidden.

Use Spinner for work with an unknown duration. Set aria-hidden when adjacent text already describes the loading state. Set ready when work completes to resolve it into a checkmark, then blur and collapse it away.

import { Spinner } from '@mielui/svelte/components/spinner';

<Spinner ready={saved} aria-hidden="true" />

Speed and curved rotation

Pass speed to scale the rotation pace, or curved for a varying-speed rotation that never stalls. The default stays a continuous spin.

Completion state

Pass ready after a successful operation. The spinner resolves to a checkmark, holds it for two seconds, then blurs and collapses without requiring parent state to unmount it.