# Spinner

An animated loading indicator that can resolve to a checkmark.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: components/_internal/theme-changes, components/_internal/motion-loop, hugeicons-icon, utils.cn, transition

## Install

~~~~sh
pnpm dlx @mielui/svelte add spinner
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Spinner

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| size | number \| undefined | 16 | No | No | Diameter in pixels. |
| ready | boolean \| undefined | false | No | No | Marks the work as finished. |
| speed | number \| undefined | 1 | No | No | Rotation speed multiplier. |
| eased | boolean \| undefined | false | No | No | Speeds up and slows down through each turn instead of spinning at a steady pace. |
| class | string \| undefined | - | No | No | Classes added to the element. |
| aria-label | string \| undefined | - | No | No | Accessible name when there is no visible label. |
| aria-hidden | boolean \| "true" \| "false" \| undefined | - | No | No | Hides it from assistive technology when it is decorative. |



### Public types

~~~~ts
import Spinner from './spinner.svelte';

export type SpinnerProps = {
    /** Diameter in pixels. */
    size?: number;
    /** Marks the work as finished. */
    ready?: boolean;
    /** Rotation speed multiplier. */
    speed?: number;
    /** Speeds up and slows down through each turn instead of spinning at a steady pace. */
    eased?: boolean;
    /** Classes added to the element. */
    class?: string;
    /** Accessible name when there is no visible label. */
    'aria-label'?: string;
    /** Hides it from assistive technology when it is decorative. */
    'aria-hidden'?: boolean | 'true' | 'false';
};

export { Spinner };
~~~~

## Examples

### Pace

~~~~svelte
<script lang="ts">
    import { Spinner } from '@mielui/svelte/components/spinner';
</script>

<div class="flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-foreground-muted">
    <span class="flex items-center gap-2">
        <Spinner aria-hidden="true" />
        <span>Default</span>
    </span>
    <span class="flex items-center gap-2">
        <Spinner speed={2} aria-hidden="true" />
        <span>Twice as fast</span>
    </span>
    <span class="flex items-center gap-2">
        <Spinner eased aria-hidden="true" />
        <span>Eased</span>
    </span>
</div>
~~~~

### Ready State

~~~~svelte
<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import { Spinner } from '@mielui/svelte/components/spinner';
    import { onDestroy, onMount } from 'svelte';

    let ready = $state(false);
    let timer: ReturnType<typeof setTimeout> | undefined;

    function save() {
        clearTimeout(timer);
        ready = false;
        timer = setTimeout(() => {
            ready = true;
        }, 900);
    }

    onMount(save);

    onDestroy(() => {
        clearTimeout(timer);
    });
</script>

<div class="flex w-full max-w-sm items-center justify-between gap-4">
    <div class="flex items-center gap-2 text-sm text-foreground-muted">
        <Spinner {ready} aria-hidden="true" />
        <span>{ready ? 'Changes saved' : 'Saving changes'}</span>
    </div>
    <Button onclick={save} disabled={!ready}>Save again</Button>
</div>
~~~~

For the rendered reference, visit [/docs/components/spinner](/docs/components/spinner).