An indeterminate loading indicator that takes the color and size of the text around it.
Sizes
Inline, it follows the surrounding text. Medium is 24px and large is 40px.
Example
Saving
'use client';
import { Spinner } from '@snapshot-ui/react';
import type { ReactElement } from 'react';
export default function SpinnerSizes(): ReactElement {
return (
<div className="row" style={{ justifyContent: 'center', gap: 32 }}>
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
Saving <Spinner aria-label="Saving" />
</span>
<Spinner size="md" />
<Spinner size="lg" />
</div>
);
}Usage
Give it a name that says what is loading. A Button shows one by itself while isPending.
import { Spinner } from '@snapshot-ui/react';
<Spinner aria-label="Loading results" size="md" />Props
The size, and React Aria ProgressBar's labelling props.
aria-label
stringDefines a string value that labels the current element.
size
SpinnerSizeinline follows the surrounding font size; md is 24px and lg is 40px.
Default: 'inline'
Accessibility
Announced as an indeterminate progress bar. Under reduced motion it slows down rather than stopping, because a still spinner reads as finished.