A basic rotating throbber.svg for Drupal 8

throbber.svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path id="throbber" fill="#40B6ff" d="M17.943,5.046L16.564,5.91l-0.028,0.086c1.009,1.65,1.396,3.68,0.907,5.704 c-0.893,3.696-4.348,6.055-8.024,5.748c-0.668-0.056-0.47-0.527-0.47-0.527l0.3-1.241c0,0,0.051-0.486,0.62-0.463 c2.475,0.105,4.765-1.545,5.372-4.049c0.342-1.421,0.063-2.836-0.642-3.997l-0.096,0.031L12.848,8.24 c-0.564,0.354-0.916,0.11-0.779-0.543l0.748-3.585c0.136-0.653,0.776-1.055,1.424-0.893l3.553,0.889 C18.439,4.27,18.507,4.692,17.943,5.046z M7.228,11.636l-1.644,1.031l-0.04,0.013c-0.704-1.16-0.983-2.576-0.641-3.997 C5.51,6.179,7.8,4.529,10.275,4.634c0.569,0.024,0.62-0.463,0.62-0.463l0.301-1.241c0,0,0.197-0.471-0.471-0.527 C7.05,2.095,3.594,4.454,2.702,8.15c-0.489,2.024-0.102,4.054,0.907,5.704l-0.021,0.065L2.134,14.83 c-0.565,0.354-0.498,0.777,0.149,0.939l3.553,0.889c0.647,0.162,1.288-0.24,1.424-0.893l0.748-3.586 C8.144,11.525,7.793,11.282,7.228,11.636z"/>
<script>
window.onload = function() {
  var el = document.getElementById("throbber"),
  // Calculate the horizontal center (cx) and
  // vertical center (cy) of the bounding box
  // of the element being rotated.
  bb = el.getBBox(),
  bbx = bb.x,
  bby = bb.y,
  bbw = bb.width,
  bbh = bb.height,
  cx = bbx + 0.5 * bbw,
  cy = bby + 0.5 * bbh,
  angle = 0,
  degrees = 20,
  speed = 100
  // Begin the element rotation.
  svgRotator = setInterval (
    function () {
      angle -= degrees; el.setAttribute("transform","rotate("+angle+" "+cx+" "+cy+")");
    }
  , speed);
};
</script>
</svg>