Spinner

An indeterminate loading indicator with a screen-reader label built in.

import { HStack, Spinner } from "astralis-ui";

export function SpinnerDemo() {
  return (
    <HStack gap="6" alignItems="center">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="xl" />
    </HStack>
  );
}

Import#

import { Spinner } from "astralis-ui";

Color schemes#

The arc paints with the accent channel, so any scheme works.

import { HStack, Spinner } from "astralis-ui";

export function SpinnerSchemes() {
  return (
    <HStack gap="6" alignItems="center">
      <Spinner colorScheme="brand" />
      <Spinner colorScheme="blue" />
      <Spinner colorScheme="green" />
      <Spinner colorScheme="purple" />
      <Spinner colorScheme="gray" />
    </HStack>
  );
}

Props#

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Diameter.
`colorScheme`	all 11 schemes	`"brand"`	Hue of the spinning arc.
`label`	`string`	`"Loading…"`	Visually-hidden text announced to screen readers.

Accessibility#

Renders role="status" with a visually-hidden label, so assistive tech announces the loading state without any extra wiring.
The arc keeps spinning under prefers-reduced-motion — it conveys state, not decoration. Pair long operations with Progress when you can report actual completion.