Spinner

Indicate ongoing loading with a rotating ring, spokes, or capsule shape.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Spinner for a continuing wait state. Use Progress when completion can be measured. Prefer the built-in Spinner of a loading Button or table when available.

variant chooses the waiting graphic. size takes priority over parent size and defaults to 16 without context.
Spinner does not render children. Compose a loading label outside it. Use Progress when a completion ratio is known.
The default loading status name follows LocaleProvider; an explicit aria-label takes priority. External loading descriptions remain caller-owned text.

Import

import { Spinner } from '@snowui-design-system/components';

Usage

Variants

Sizes

Speed

Playback

API Reference

Property	Type	Default	Example	Description
`variant`	`SpinnerVariant`	`"circle"`	`variant={value}`	Appearance of the animated indicator.
`size`	`ResourceSize`	`—`	`size={value}`	Size; supports 12, 16, 20, 24, 28, 32, 40, 48, or 80. Inherits parent iconSize or size when omitted, and defaults to 16 without context.
`speed`	`number`	`1`	`speed={42}`	Positive animation speed multiplier. The base cycle is 1000 ms for circle and 800 ms for spokes or pills, divided by this value. Nonfinite or nonpositive values fall back to 1. An explicit loopMotion timeline takes priority.
`loopMotion`	`LoopMotionConfig`	`—`	`loopMotion={value}`	Override the default looping animation bridge. Takes priority over the duration derived from speed. When passed a preset, Spinner uses only its timing fields so the Frame root does not rotate a second time.
`children`	`Snippet`	`—`	`<Spinner>Content</Spinner>`	Present for Frame type compatibility. Spinner draws its built-in animated graphic and does not render child content. Compose text outside the component.