novixuiv0.1
Install

Components · v0.1 · Stable

Spinner

A single SVG spinner for indeterminate progress — sub-2KB, tuned for reduced motion, and sized in em so it reads at any typography scale.

Example

A default spinner announces "Loading" to assistive tech.

Installation

Install and import.

tsx
npx @novix-ui/cli add spinner
tsx
import { Spinner } from "@novix-ui/react";

When to use

Use it for

  • Any async initiated by user input
  • Streaming AI responses (with a Thinking indicator, later)
  • Foreground network requests

Skip it for

  • Full-page or layout-known loads — Skeleton is stiller and less anxious
  • Background sync — use a small dot indicator

Playground

Playground

md
current

Sizes

Tones

Inline usage

Use size="inherit" to scale with the surrounding text.

Publishing…

API

Prop
Type
Default
Description
  • size
    "xs" | "sm" | "md" | "lg" | "xl" | "inherit"
    "md"
    Diameter. Use inherit to scale with surrounding font-size.
  • tone
    "current" | "muted" | "accent" | "primary"
    "current"
    Stroke color. Defaults to text color.
  • label
    string
    "Loading"
    Screen-reader label announced via aria-label.

Accessibility

Design guidelines

Match text size

In a button, use size=inherit so the ring aligns with the label baseline.

Don't stack spinners

One canonical indicator per view. Stacking reads as broken UI.

Debounce below 200ms

Instant work shouldn't spin. Delay the reveal until the wait is real.

Common mistakes

  • Sizing with height in pixels — use the size prop so tone and stroke stay in sync.
  • Wrapping in a div with aria-hidden. The spinner already exposes progress semantics.