Spinner

Spinner

<Spinner />
<Spinner size="lg" tone="brand" />
<Button><Spinner size="sm" /> Loading…</Button>

Install: @helixui/core

import { Spinner } from '@helixui/core'

status: stable · since: 0.1.0

Tags: loading, spinner, indicator

Anatomy

◐   ← rotating ring

Layout

• display — inline-block
• width — content
• height — content
• intrinsicSize — 16/20/24/32px (sm/md/lg/xl)
• stackable — true
• fullBleed — false

Visual

A circular progress ring with a rotating gap. Color follows currentColor. Animation respects prefers-reduced-motion.

Props

Name	Type	Default	Description
size	'sm' | 'md' | 'lg'	md	Visual size.
tone	'current' | 'brand' | 'neutral'	current	Color. current inherits from CSS color.
label	string	Loading	Accessible name announced by screen readers.

Tokens used

color.text.action.brand, color.text.muted

Accessibility

Role: status

Notes

• For determinate progress, use a different component (helixui does not yet ship one — use the native <progress> for now).
• Animation duration extends under prefers-reduced-motion rather than stopping outright; a frozen spinner suggests “stuck”.

Composes with

Component	Relation	Note
Button	child	Inside a Button when the action is in flight.
ProgressBar	alternative	ProgressBar when there is a known value or this takes long.
Skeleton	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

loading indicator

“small inline spinner”

<Spinner size="sm" />

Related

• Skeleton