Spinners for indeterminate waits

Spinners communicate indeterminate progress—refreshing lists, awaiting mutations, or blocking interaction briefly. Use them inside React buttons and Next.js route transitions.

Examples

Pulse variant uses a Framer Motion opacity and scale loop on the track.

Spinner variants examples

Palette-aligned appearances, motion variants, and sizes. Snippets include a leading Variant: line.

CSS variable overrides

Spinner CSS variables

Override these spinner variables on :root, a theme selector, or a component wrapper.

44 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-spinner-default-fg: oklch(20.8% 0.042 265.755);
  --zui-spinner-secondary-fg: oklch(44.6% 0.043 257.281);
  --zui-spinner-destructive-fg: oklch(58.6% 0.253 17.585);
  --zui-spinner-ghost-fg: oklch(44.6% 0.043 257.281);
  --zui-spinner-emerald-fg: oklch(59.6% 0.145 163.225);
  --zui-spinner-indigo-fg: oklch(51.1% 0.262 276.966);
  --zui-spinner-purple-fg: oklch(55.8% 0.288 302.321);
  --zui-spinner-pink-fg: oklch(59.2% 0.249 0.584);
  --zui-spinner-rose-fg: oklch(58.6% 0.253 17.585);
  --zui-spinner-sky-fg: oklch(58.8% 0.158 241.966);
  --zui-spinner-teal-fg: oklch(60% 0.118 184.704);
  --zui-spinner-yellow-fg: oklch(68.1% 0.162 75.834);
  --zui-spinner-orange-fg: oklch(64.6% 0.222 41.116);
  --zui-spinner-gradient-blue-fg: oklch(54.6% 0.245 262.881);
  --zui-spinner-gradient-green-fg: oklch(62.7% 0.194 149.214);
  --zui-spinner-gradient-red-fg: oklch(57.7% 0.245 27.325);
  --zui-spinner-gradient-yellow-fg: oklch(68.1% 0.162 75.834);
  --zui-spinner-gradient-purple-fg: oklch(55.8% 0.288 302.321);
  --zui-spinner-gradient-teal-fg: oklch(60% 0.118 184.704);
  --zui-spinner-gradient-indigo-fg: oklch(51.1% 0.262 276.966);
  --zui-spinner-gradient-pink-fg: oklch(59.2% 0.249 0.584);
  --zui-spinner-gradient-orange-fg: oklch(64.6% 0.222 41.116);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-spinner-default-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-spinner-secondary-fg-dark: oklch(86.9% 0.022 252.894);
  /* ...same variables with -dark at the end */
}

What it does

Pair spinners with text when the wait may exceed a few hundred milliseconds.

Respect prefers-reduced-motion when animating strokes.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Avoid nested spinners that compete for attention.

Common use cases

Button loading slots during form submits.
Panel refresh indicators beside titles.
Inline fetches inside cards.
Blocking overlays for short mutations.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Spinner component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize spinner with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Spinner implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.