Spinner

A compact loading indicator, decorative unless it has a label.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Decorative indicators

Loading sample records

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add spinner

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Spinner label="Loading projects" size="md" />
<Button loading>Save changes</Button>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`size`	`sm \| md \| lg`	`sm`
`label`	`string`	`— (decorative)`

Accessibility

Without a label, the span is aria-hidden. With a label it exposes status and hidden readable text. Avoid duplicate announcements beside an existing status message. Loading never steals focus. Reduced motion stops rotation. The shared Button uses the same indicator without adding a second name. Ref targets the outer span.