Spinner - Component

View full screen
Code

Source (Nunjucks)

<svg viewBox="0 0 6 6" class="spinner" style="--color: var(--color-highlight-text); width: 50px;">
  <circle cx="3" cy="3" r="2.5" />
</svg>

Output

<svg
  viewBox="0 0 6 6"
  class="spinner"
  style="--color: var(--color-highlight-text); width: 50px"
>
  <circle cx="3" cy="3" r="2.5" />
</svg>

Information

To display when content is loading. The --color CSS variable can be used to determine the color of the drawn stroke. The CSS width property can be used to size the element.

Key links