Spinner
Animated loading indicator for indeterminate wait states. Accessible with aria-label.
Examples
Sizes
Spinner at sm, md, and lg sizes — style driven by personality shape slider.
Colours
Brand, success, warning, and error spinner variants.
With text
Spinner combined with a loading label.
All styles
The six personality-driven spinner styles — move the shape slider to see the active one change.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Spinner } from "@rokle/components";import { Spinner } from "@rokle/components";
export function Example() {
return <Spinner />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Spinner size. |
| label | string | "Loading" | Accessible label for screen readers. |