Spinner

Summary

An indeterminate loading indicator. Replaces AUI's canvas-based spin.js integration with a pure CSS animation that inherits currentColor, so it picks up the text color of its container, the same behaviour spin.js had. Sizes mirror AUI's presets: small (default), medium, large.

The spinner element carries role="status" and an aria-label so screen readers announce it politely. Under prefers-reduced-motion the rotation slows down rather than stopping: the motion is the signal.

Examples

HTML

<span class="neura-spinner" role="status" aria-label="Loading"></span>
<span class="neura-spinner neura-spinner-medium" ...></span>
<span class="neura-spinner neura-spinner-large" ...></span>

JavaScript API

Neura.spinner('#el');                    // append a small spinner
Neura.spinner(el, { size: 'medium' });   // 'small' (default) | 'medium' | 'large'
Neura.spinner(el, {
  color: '#d04437',                      // inline color override (else currentColor)
  label: 'Saving…',                      // aria-label; default "Loading" (localized)
});
Neura.spinnerStop(el);                   // remove el's direct-child spinners

Neura.spinner() returns the spinner element. Calling it again on the same container reuses the existing spinner and just updates its size / color (no duplicates). Neura.spinnerStop() removes direct-child spinners only, so spinners in nested regions are unaffected.

AUI compatibility

The shim registers AUI's jQuery plugin surface on the page's jQuery:

AJS.$('#el').spin();          // small (AUI's default preset)
AJS.$('#el').spin('large');   // preset name: small | medium | large
AJS.$('#el').spin(false);     // stop
AJS.$('#el').spinStop();      // stop

CSS classes