Spinner

CSS-only loading spinner for indicating loading states.

Basic usage

<div class="af-spinner">
</div>
<div class="af-spinner af-spinner-sm">
</div>
<div class="af-spinner af-spinner-lg">
</div>

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

Live example