Spinner
The Spinner is a native web component that displays an animated loading indicator. Use it to signal that processing is in progress, such as loading data or submitting a form. Four variants cover the classic loading moves: `ring` (spinning arc, default), `dots` (jumping dots), `pulse` (pulsing dots) and `ripple` (expanding rings), all in pure CSS keyframes. It exposes the ARIA "status" role for screen readers and supports a custom accessible label.
Preview
<!-- spinning arc (default) -->
<pura-spinner></pura-spinner>
<!-- jumping dots -->
<pura-spinner variant="dots"></pura-spinner>
<!-- pulsing dots -->
<pura-spinner variant="pulse"></pura-spinner>
<!-- expanding rings -->
<pura-spinner variant="ripple" size="lg" label="Loading data"></pura-spinner>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | "ring" | "dots" | "pulse" | "ripple" | ring | Loading style: ring (spinning arc), dots (jumping dots), pulse (pulsing dots), or ripple (expanding rings). |
size | "sm" | "md" | "lg" | md | Spinner size: sm (small), md (medium), or lg (large). |
label | string | Loading | Accessible label (aria-label) announced by screen readers. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/spinner.js"></script>import "./pura/lib/spinner.js";