Skip to content
SynapseSynapse

Spinner

Spinner is a minimal rotating arc for inline and in-button loading states. It sizes to a single number and defaults its arc to the host’s accent token, so it looks native in whatever host renders your app. It reports role="status" for assistive tech and eases its animation under prefers-reduced-motion. The previews below are the real component from @nimblebrain/synapse/ui, live.

import { Spinner } from "@nimblebrain/synapse/ui";


<Spinner />;

Sizes

Section titled “Sizes”

size is the diameter in pixels. Use the default 16 inline with text, and scale up for a standalone loading state.

<Spinner />
<Spinner size={24} />
<Spinner size={40} />

Props

Section titled “Props”

Spinner extends the native HTMLAttributes, so aria-*, className, and other span attributes pass straight through.

Prop Type Default
size number 16
color string accent token
…rest HTMLAttributes<HTMLSpanElement> None
Section titled “Related”
  • Button: drop a Spinner inside for a loading action.
  • EmptyState: the resting counterpart when there’s nothing to load.