Spinner

The spinner (.spinner) is a small rotating-arc loading indicator, meant for inline or compact use — inside a button while it's busy, next to a label while a section is fetching data, or standalone in place of content that hasn't arrived yet. It's built from an inline SVG with two concentric circles, and the rotation is a pure CSS animation with no JavaScript involved.

<span class="spinner" role="status" aria-label="Loading">
  <svg class="spinner-icon" viewBox="0 0 24 24">
    <circle class="spinner-track" cx="12" cy="12" r="10"></circle>
    <circle class="spinner-arc" cx="12" cy="12" r="10" stroke-dasharray="47 62.8"></circle>
  </svg>
</span>