Spinner
Spinner component - display loading state with rotating squares
Spinner component - display loading state with rotating squares
import { Spinner } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
size | Optional | ComponentSize | undefined | 'md' | Size variant of the spinner |
color | Optional | "primary" | "secondary" | undefined | 'primary' | Color variant of the spinner |
fullScreen | Optional | boolean | undefined | false | Whether to display in fullscreen mode |
className | Optional | string | undefined | — | Custom className for the root element |
label | Optional | string | undefined | — | Optional label text to display below the spinner |
speed | Optional | "slow" | "normal" | "fast" | undefined | 'normal' | Speed of the animation |
type | Optional | "circle" | "square" | undefined | 'dot' | Type of spinner animation |
Usage
Loading indicator. Two animation styles (square and circle), three sizes,
optional label and a fullscreen overlay mode.
Notes
- Uses
role="status"andaria-live="polite"for screen-reader updates. - Inside
<Button loading>, the button automatically renders its own spinner.
Example
/** * Runnable example for Spinner. */import { Spinner } from '@tetherto/mdk-react-devkit'export const SpinnerExample = () => { return ( <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}> <Spinner size="sm" /> <Spinner size="md" type="circle" /> <Spinner size="lg" label="Loading miners…" /> </div> )}