<svg class="spinner icon-4 text-marigold" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle>
</svg>

The Spinner Element is a generic animation used to indicate a process or loading period. The source comes from the Patterns Scripts spinner utility. The SVG element can be copied from the demo above and pasted into the DOM or it can be added programmatically via JavaScript. The stylesheet needs to be imported to support the animation. The size of the spinner defaults to 24px by 24px but can be changed using icon size utilities. The color of the spinner can also be changed using text color utilities.