Spinner

11 loading animation variants — ring, dots, pulse, bars, wave, and more. Composable with buttons and overlays.

Import

ts 
import Spinner from '$lib/components/Spinner.svelte';

Usage

svelte 
<Spinner />
<Spinner variant="dots" size="lg" />
<Spinner variant="bounce" color="var(--destructive)" />

Variants

Click any card to trigger a 2s loading state and see the accent color.

svelte 
<Spinner variant="ring" />
<Spinner variant="ring-dual" />
<Spinner variant="ring-split" />
<Spinner variant="ring-track" />
<Spinner variant="dots" />
<Spinner variant="bounce" />
<Spinner variant="pulse" />
<Spinner variant="bars" />
<Spinner variant="wave" />
<Spinner variant="ripple" />
<Spinner variant="orbit" />

Sizes

Five size presets: xs · sm · md · lg · xl.

xs
sm
md
lg
xl
svelte 
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

With Buttons

Compose with buttons to show inline loading state. Use color="currentColor" to inherit the button's text color.

svelte 
<Button disabled={loading} onclick={handleSave}>
  {#if loading}
    <Spinner size="xs" color="currentColor" />
    Saving...
  {:else}
    Save
  {/if}
</Button>

Overlay

Render a spinner overlay on top of content using absolute positioning and a backdrop blur.

svelte 
<div class="relative">
  <!-- your content -->
  {#if loading}
    <div class="absolute inset-0 flex items-center justify-center bg-background/70 backdrop-blur-sm">
      <Spinner size="lg" variant="ring-dual" />
    </div>
  {/if}
</div>

Playground

Pick a variant and size to preview the spinner.

Variant

Size

API Reference

PropTypeDefaultDescription
variant 'ring' | 'ring-dual' | 'ring-split' | 'ring-track' | 'dots' | 'bounce' | 'pulse' | 'bars' | 'wave' | 'ripple' | 'orbit''ring'Animation style of the spinner.
size 'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size preset for the spinner.
color stringvar(--accent)CSS color value or custom property for the spinner fill.