Spinner — Vanilla

Loading spinner with vanilla HTML. Ensure Rizzo CSS is loaded.

Spinner

Loading spinner. Use spinner--sm, spinner--md, spinner--lg and spinner--primary, spinner--success, etc.

Add this component

The command below includes <strong>Spinner</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<span class="spinner spinner--md spinner--primary" role="status" aria-label="Loading">
  <span class="spinner__ring" aria-hidden="true"></span>
</span>
<span class="spinner spinner--sm spinner--success" role="status" aria-label="Loading"><span class="spinner__ring" aria-hidden="true"></span></span>
<span class="spinner spinner--lg spinner--warning" role="status" aria-label="Loading"><span class="spinner__ring" aria-hidden="true"></span></span>

Other frameworks: Astro · Svelte · Vue · React