Spinner

SVG with class="spinner". Standalone: role="status" and aria-label="Loading". Inside a labeled button: aria-hidden. Paste the markup first. The SVG is the piece worth wrapping — copy src/components/ui/Spinner.svelte.

Preview

Markup

<svg class="spinner" viewBox="0 0 24 24" fill="none" role="status" aria-label="Loading">
	<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" opacity="0.25"></circle>
	<path d="M21 12a9 9 0 0 1-9 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
</svg>

Imported

<script>
	import Spinner from './ui/Spinner.svelte';
</script>

<Spinner />

<button class="button" type="button">
	<Spinner decorative />
	Please wait
</button>