Primitive
Spinner CSS-only
Loading indicator. Five sizes, plus a light variant for dark surfaces. Pure CSS — no JavaScript.
About
Overview
Show a spinner when a button or panel is processing and the user can't see the result yet. For longer waits or while content is loading inline, prefer Skeleton.
Live
Demo
<div class="ren-spinner"></div>
<div class="ren-spinner ren-spinner-lg"></div>
<div class="ren-spinner ren-spinner-light"></div> <!-- on dark bg -->Reference
API
| Class | Effect |
|---|---|
.ren-spinner | Base. 24 px circular spinner. |
.ren-spinner-xs / -sm / -lg / -xl | Size variants. 12 / 16 / 32 / 40 px. |
.ren-spinner-light | White spinner for dark backgrounds. |
Inclusive by default
Accessibility
- The container should have
role="status"and a screen-reader-only label:<span class="ren-sr-only">Loading…</span>. - Respects
prefers-reduced-motion— the spin slows or stops under the user's preference.