feedback
Spinner
A small turning ring that shows something is busy, always next to words that say what.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Put the spinner next to text in a role="status" element, and hide the ring itself with aria-hidden="true".
Saving the lesson…
<p class="flex items-center gap-2" role="status">
<span class="ca-spinner ca-spinner--md" aria-hidden="true"></span>
Saving the lesson…
</p>Examples
In a button
Keep the button in place with aria-disabled="true" while it works, and change its label.
Sizes
Match the size to the text next to it.
<div class="flex items-center gap-4" aria-hidden="true">
<span class="ca-spinner ca-spinner--sm"></span>
<span class="ca-spinner ca-spinner--md"></span>
<span class="ca-spinner ca-spinner--lg"></span>
</div>Guidance and accessibility
When to use
- Use a spinner for a short wait in one place, such as a button that saves.
- For content that takes longer to load, use skeletons; for a task with a known end, use a progress bar.
Accessibility
- The ring is decoration: hide it with
aria-hidden="true"and say what is busy in words, inside arole="status"element so screen readers hear it. - It only turns when people allow motion; with reduced motion the ring stands still and the words carry the message.
- Keep a busy button focusable with
aria-disabled="true"instead ofdisabled, so focus does not jump away.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-spinner | Component | The ring. Add one size. |
ca-spinner--sm | Size | For buttons and small text. |
ca-spinner--md | Size | For body text. |
ca-spinner--lg | Size | For a larger area that is loading. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Saving the lesson…
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Saving the lesson…
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Saving the lesson…
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Saving the lesson…
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>