Spinner

Live Demo

Border Spinner

Growing Spinner

Spinner with Label

Button with Spinner

1. Component Summary

2. Design Tokens

3. Authoring Fields

4. Validation Rules

No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).

5. Content Guidance

• Always provide an accessible label — even if the spinner is purely decorative in a button, the button's own label must describe the loading state (e.g. "Processing…").
• Be specific — prefer "Loading your pension details…" over a generic "Loading…" so members know what to expect.
• Keep labels concise — aim for fewer than 40 characters for visible labels.
• Use spinners sparingly — if content loads in under 300 ms a spinner adds visual noise rather than reassurance. Defer rendering until a short delay has elapsed.
• Pair with disabled controls — when a spinner indicates a form submission, disable the submit button to prevent duplicate requests.

6. Semantic HTML

Border spinner (default)

<div class="caat-spinner" role="status">
  <span class="visually-hidden">Loading…</span>
</div>

Growing spinner — large

<div class="caat-spinner caat-spinner--grow caat-spinner--lg" role="status">
  <span class="visually-hidden">Loading…</span>
</div>

Spinner with visible label

<div class="caat-spinner__label" role="status">
  <div class="caat-spinner caat-spinner--sm" aria-hidden="true"></div>
  Loading your pension details&hellip;
</div>

Button with spinner

<button class="caat-button caat-button--primary" type="button" disabled>
  <span class="caat-spinner" aria-hidden="true"></span>
  Processing&hellip;
</button>

7. CSS Contract

Reduced motion: When prefers-reduced-motion: reduce is active, all animation stops and the spinner displays a static indicator with reduced opacity.

8. Accessibility

9. SEO Considerations

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

• Proxy component — create at /apps/caat/components/spinner.
• HTL template — emit a <div> with BEM classes driven by dialog selections. Use data-sly-attribute for role="status".
• Client library — category caat.components.spinner. Include spinner.css only; no JS dependency for CSS-only animation.
• Sling model — expose variant, size, accessibleLabel, visibleLabel, and colourOverride.
• Allowed parents — may be embedded inside Button, Card, Modal, and any container component.
• No JavaScript required — spinner animation is pure CSS. Toggle visibility via hidden attribute or class in consuming component JS.

12. Dialog Model (JSON)

Not authored directly. The spinner is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.

13. QA Acceptance Checklist

• Border spinner renders a smooth rotating ring in --caat-blue-900.
• All three sizes (sm, default, lg) render at correct dimensions (1 rem, 2 rem, 3 rem).
• Growing spinner pulses with scale animation.
• Visible label sits inline beside the spinner with correct alignment.
• Button-with-spinner variant shows spinner + "Processing…" text while disabled.
• role="status" is announced by NVDA and VoiceOver.
• .visually-hidden label is read by screen readers for standalone spinners.
• Animation stops when prefers-reduced-motion: reduce is active; static indicator is visible.
• Spinner colour meets WCAG 2.1 AA non-text contrast (3 : 1) against white.
• Analytics events (spinner-shown, spinner-duration) fire correctly.
• Cross-browser tested: Chrome, Firefox, Safari, Edge.

14. Definition of Done