Spinner

CSS-only loading spinner for indicating loading states.

Basic usage

<div class="af-spinner af-spinner-sm" role="status" aria-label="Loading"></div>
<div class="af-spinner" role="status" aria-label="Loading"></div>
<div class="af-spinner af-spinner-lg" role="status" aria-label="Loading"></div>

Button loading

For a spinner inside a button, prefer aria-busy="true" on af-btn — see Button. For a full-page wait, see Page Loader.

Accessibility

• Decorative spinners should be aria-hidden="true"
• When a spinner stands alone, provide an accessible name (aria-label="Loading" or visually hidden text)

Sizes

• af-spinner-sm - Small spinner
• af-spinner - Default size
• af-spinner-lg - Large spinner