Spinner
A small busy indicator for inline use — at the end of a row, on a chip, beside a line of text, in the corner of a card that is refetching.
Walkthrough
1. Basic
A spinner says "working" in the space of an icon. It is a live status, so a screen reader hears its label — "Loading" unless you name the wait.
<script lang="ts"> import { Spinner } from 'omaris';</script><Spinner /><Spinner label="Loading orders" size="lg" />2. Sizes and tones
Four sizes for four places — a chip, a line of text, a row, a card — and the library's tones. tone="current" borrows the colour of the text around it.
<script lang="ts"> import { Spinner, Text } from 'omaris'; const TONES = ['primary', 'tertiary', 'success', 'warning', 'destructive'] as const;</script><div class="flex flex-col items-center gap-6"> <div class="flex items-end gap-6"> {#each ['xs', 'sm', 'md', 'lg'] as const as size (size)} <div class="flex flex-col items-center gap-2"> <Spinner {size} /> <Text variant="label-sm" tone="muted">{size}</Text> </div> {/each} </div> <div class="flex flex-wrap items-center justify-center gap-5"> {#each TONES as tone (tone)} <Spinner {tone} label="Loading, {tone}" /> {/each} <span class="rounded-shape-md bg-inverse-surface p-2 text-inverse-surface-foreground"> <Spinner tone="current" label="Loading, current" /> </span> </div></div>3. In context
Where it belongs: at the end of the row that is syncing, beside the line that is checking, in the corner of a card that is refetching while its old figure stays on screen.
orders-2026-09.csv
Syncing Syncing orders-2026-09.csvChecking the name is free…
4,820,000 IQD
<script lang="ts"> import { Card, CardContent, Spinner, Text } from 'omaris';</script><div class="flex w-full max-w-sm flex-col gap-4"> <div class="flex items-center gap-3 rounded-shape-md border border-border px-4 py-3"> <Text variant="body-md" class="min-w-0 flex-1" lines={1}>orders-2026-09.csv</Text> <Text variant="label-sm" tone="muted">Syncing</Text> <Spinner size="sm" label="Syncing orders-2026-09.csv" /> </div> <div class="flex items-center gap-2"> <Spinner size="xs" tone="current" label="Checking" /> <Text variant="body-sm" tone="muted">Checking the name is free…</Text> </div> <Card variant="outlined"> <CardContent class="flex flex-col gap-1"> <div class="flex items-center justify-between gap-3"> <Text variant="label-md" tone="muted">Revenue this week</Text> <Spinner size="sm" label="Refreshing revenue" /> </div> <Text variant="headline-md" tabular>4,820,000 IQD</Text> </CardContent> </Card></div>4. Overridden
Every part is reachable: class sizes the root past lg, classes thickens the arc or drops the track, and an aria-label the caller sets is kept.
<script lang="ts"> import { Spinner } from 'omaris';</script><Spinner class="size-12" label="Loading a big thing" /><Spinner size="lg" tone="tertiary" classes={{ track: 'hidden', indicator: 'stroke-[3.5]' }} label="Loading"/><Spinner size="sm" aria-label="Refreshing prices" label="Refreshing" />