Spinner

A monochrome loading indicator that spins.

<script lang="ts">
  import { Spinner } from "$lib/components/ui/spinner";
</script>
 
<div class="flex items-center gap-6">
  <Spinner class="size-4" />
  <Spinner class="size-6" />
  <Spinner class="size-8 border-[3px]" />
</div>

Installation

npx lily-svelte@latest add spinner

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the spinner source from the registry into `$lib/components/ui/spinner`.

Usage

Size and stroke are controlled with utility classes — size-* for the diameter and border-* for the stroke width.

<script lang="ts">
	import { Spinner } from '$lib/components/ui/spinner';
</script>
 
<Spinner class="size-6" />

← Sonner Stepper →