Spinner
Shows that something is loading when you can't say how long it will take. It announces its label to screen readers and inherits the text color and size.
Installation
Set up Camaleo once (Installation), then import it. It renders on the server.
import { Spinner } from "@camaleo/react";Anatomy
A role="status" wrapper with the spinning ring and a visually hidden label.
Examples
Sizes
It is 1em wide, so it follows font-size. Inside text it matches the line.
Color
It draws in currentColor. Set color with a token so it keeps contrast in every skin.
With visible text
When the text is on screen, hide it from assistive tech (aria-hidden) so the status isn't read twice.
Inside a sentence
Next to text it follows the line height. Say how far along it is when you know it ("3 of 12").
In a button
Don't place a spinner by hand inside a button — use Button loading, which keeps the width and the focus.
Checking a field
A spinner in the field description while the value is validated on the server.
In context
Recent orders
Uploading report.pdf
2.4 MB · about 10 seconds
Guidelines
"Syncing" is better than a generic "Loading" — and the label is what screen readers hear.
If you know the percentage, show it.
People wait better when they can see the end.
Recent orders
The skeleton shows the shape of what is coming; the spinner says it is on its way.
Props
role="status".Every <span> attribute passes through: style, className, aria-*.
Styling hooks
Attributes
Tokens it reads
This component only
Accessibility
- role="status" announces the label politely, without moving focus.
- Under prefers-reduced-motion the animation eases down through --cml-spinner-ease.
- Mark the region that is loading with aria-busy="true" so assistive tech waits for it.