Component reference
Spinner
An indeterminate loading indicator with a label that says what is loading.
Preview
A readable wait
Keep text next to the graphic that says what is happening, without inventing a percentage; the spinner stops when reduced motion is requested. The button toggles local demo state.
render: () => {
const loading = signal(true);
return (
<Stack align="start">
{mapSignal(loading, (value) =>
value ? (
<Spinner label="Organizing the file list…" />
) : (
<Note role="status">The file list is ready.</Note>
),
)}
<Button
variant="outline"
onClick={() => {
loading.value = !loading.value;
}}
>
{mapSignal(loading, (value) => (value ? "Simulate completion" : "Replay the wait"))}
</Button>
</Stack>
);
}Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { Spinner } from "meowtail";
<Spinner label="Organizing the file list…" />API reference
Props
| Prop | Type | Default |
|---|---|---|
labelRequired | string | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rooticonlabel
Registry
The component is registered as spinner in the meowtail component registry.