Skip to main content

Spinner

An accessible, theme-aware loading indicator used to communicate ongoing background activity or processing.

Usage​

Basic usage​

import { Spinner } from '@nofinite/nui';

<Spinner />;

With size variations​

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Sizes​

The Spinner supports three predefined sizes.

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Available sizes:

  • sm – Small indicator for inline usage (e.g., inside buttons)
  • md – Default size for general loading states
  • lg – Large indicator for page-level or section-level loading

States​

The spinner itself is stateless, but it is commonly used to represent a loading state in other components.

Inside a disabled button​

import { Spinner, Button } from '@nofinite/nui';

<Button disabled>
  <Spinner size="sm" />
  Processing...
</Button>;

Behavior:

  • Spinner continues animating even when the parent component is disabled.
  • Communicates background work without allowing interaction.

Native Props / Composition​

The Spinner renders a semantic status element and supports additional props like className.

<Spinner className="my-custom-spinner" label="Saving data" />
  • className can be used to apply custom spacing or positioning.
  • The component does not accept children.

Props​

PropTypeDefaultDescription
size"sm" | "md" | "lg"mdControls the visual size of the spinner
labelstring"Loading"Accessible text announced by screen readers
classNamestring""Additional class names for custom styling

Behavior Notes​

  • Uses a CSS-based rotation animation (linear, infinite).

  • Visual styling adapts to the theme via CSS variables:

    • --color-border
    • --color-primary

  • Does not manage or infer loading state automatically.

<Spinner label="Fetching results" />

Accessibility​

  • Renders with role="status" to announce loading changes.
  • Uses aria-label for screen reader context.
  • Does not rely on color alone to convey motion.

Example:

<Spinner label="Uploading file" />

Layout​

  • Renders as inline-flex by default.
  • Centers its animated circle internally.
  • Can be wrapped in layout containers for positioning.
<div style={{ display: 'flex', justifyContent: 'center', padding: 20 }}>
  <Spinner size="lg" />
</div>

Best Practices​

Do​

  • Use sm size for inline or button loaders.
  • Provide a meaningful label for screen readers.
  • Use lg size for full-page or section loading states.

Don’t​

  • Use spinner without context for long operations.
  • Replace error or empty states with a spinner indefinitely.
  • Nest multiple spinners in the same visual area.