Spinner
A loading indicator that spins an icon with accessible status semantics.
Loading preview…
1<script lang="ts">
2 import Spinner from './spinner.svelte';
3</script>
4
5<div class="flex items-center gap-4">
6 <Spinner />
7 <Spinner class="size-5" />
8 <Spinner class="size-6 text-muted-foreground" />
9</div>
10Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/spinner/spinner.svelte
- ~/components/spinner/spinner.types.ts
Usage
Use the spinner to show that a section or action is loading. Pass class to change size or color.
1<script lang="ts">
2 import Spinner from '~/components/spinner/spinner.svelte';
3</script>
4
5<div class="flex items-center gap-4">
6 <Spinner />
7 <Spinner class="size-5" />
8 <Spinner class="size-6 text-muted-foreground" />
9</div>