Spinner

A compact loading indicator with a paced rotation that keeps indeterminate work feeling active.

Checking for updates

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add spinner

Usage

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 '@sivir-ui/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.

Default Speed 2 Curved

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.

Saving changes

Anatomy

Spinner - Indicates loading activity.