Spinner

The ArcadiaSpinner component displays an animated circular loading indicator.

Basic Usage

<ArcadiaSpinner />

<ArcadiaSpinner Size="lg" Color="success" Label="Loading data..." />

<ArcadiaSpinner Size="xl" Color="primary" />

Parameters

ParameterTypeDefaultDescription
Sizestring"md"Size: "sm" (16px), "md" (24px), "lg" (40px), "xl" (64px).
Colorstring"primary"Color: "primary", "success", "warning", "danger".
Labelstring?nullAccessible label. Default is “Loading”.
Classstring?nullAdditional CSS class names.
Stylestring?nullInline CSS styles.

Accessibility

  • Uses role="status" for live region announcement.
  • Provides aria-label from the Label parameter, or “Loading” as a fallback.
  • When Label is provided, it’s also shown visually next to the spinner.