mielui
Status and content

Spinner

A rotating loading indicator that can resolve into a checkmark when the work is done.

Installation

pnpm dlx @mielui/svelte add spinner

Usage

Use Spinner for work with an unknown duration. A spinner on its own says nothing to a screen reader, so pass aria-label with what is loading. When visible text next to it already says so, set aria-hidden instead.

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

<Spinner aria-label="Loading invoices" />

Reduced motion removes the transitions and the rotation. Rotation also pauses while the spinner is out of view or the page is hidden.

Examples

Speed and eased rotation

speed multiplies the rotation pace. eased varies the speed through each turn without stopping. The default is a steady spin.

Ready

Set ready when the work succeeds. The spinner turns into a checkmark, holds it for two seconds, then blurs and collapses on its own. Set it back to false to show the spinner again.

API reference

Spinner

Indicates loading activity.

  • size
    number

    Diameter in pixels.

    Default 16

  • ready
    boolean

    Marks the work as finished.

    Default false

  • speed
    number

    Rotation speed multiplier.

    Default 1

  • eased
    boolean

    Speeds up and slows down through each turn instead of spinning at a steady pace.

    Default false

  • class
    string

    Classes added to the element.

  • aria-label
    string

    Accessible name when there is no visible label.

  • aria-hidden
    boolean | "true" | "false"

    Hides it from assistive technology when it is decorative.