Spinner

A small indeterminate spinner that inherits the current text colour.

Pair with an optional label for inline "working…" states. Under reduced-motion it stops spinning and shows a static ring so it doesn't strobe.

Feedback

<script lang="ts">
	import { Spinner } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
class	string	—	Merged with the component's own classes, last — so yours win.
size	number	18	Diameter in px. Matches body text at the default.
label	string	—	Announced to screen readers while it spins. Defaults to "Loading".

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<Spinner />
<Button disabled><Spinner />Scanning…</Button>

Feedback · Badge · Alert · Progress · Skeleton · Toaster · Avatar · Image

---

← All components · Getting started · Theming · source