Volt UI
Components

Spinner

Displays a loading indicator in line or circular form.

Variants

Use variant="line" for the segmented stroke or variant="circle" for a continuous ring.

import { Spinner } from "@epilot/volt-ui"

<Spinner variant="line" />
<Spinner variant="circle" />

Sizes

Choose between different sizes to match your needs.

Accessibility

  • Uses role="status" and inherits current text color for contrast.
  • Set aria-label when the surrounding context does not describe the loading state.

API Reference

PropTypeDefaultDescription
size"sm" | "base" | "lg" | "xl" | "2xl""base"Controls the spinner dimensions.
variant"circle" | "line""line"Visual style of the spinner.
classNamestring-Additional classes for custom styling.