JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spinner">
    <svg id="spinner-svg" xmlns="http://www.w3.org/2000/svg"/>
</div>

CSS

#spinner {
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
}
#spinner svg {
    width: 1200px;
    height: 40px;
    position: absolute;
    top: 0;
    -webkit-animation: play 1s steps(30) infinite;
}

@-webkit-keyframes play {
   from { left:    0px; }
     to { left: -1200px; }
}

JavaScript

/**
* Generate load spinner, which is a sprited SVG of simple arc paths.
*/
function generateSpinner(steps) {
    var DIM_PX = 40,
        RADIUS_PX = 18,
        GAP_RAD = 0.5,
        step_rad = 2 * Math.PI / steps
    for (var i=0; i<steps; i++) {
        var pos_rad = i * step_rad,
            center = DIM_PX / 2,
            startX = center + Math.cos(pos_rad)           * RADIUS_PX + (i*DIM_PX),
            startY = center - Math.sin(pos_rad)           * RADIUS_PX,
            endX = center   + Math.cos(pos_rad + GAP_RAD) * RADIUS_PX + (i*DIM_PX),
            endY = center   - Math.sin(pos_rad + GAP_RAD) * RADIUS_PX,
            path = makeSVG('path', {
                'd': 'M ' + startX + ' ' + startY + ' ' +
                   'A ' + RADIUS_PX + ' ' + RADIUS_PX + ' 0 1 1 ' + endX + ' ' + endY,
                'stroke': '#227AD9',
                'stroke-width': 2,
                'fill': 'white'
            })
        document.getElementById('spinner-svg').appendChild(path)
    }
}

/**
* Utility to write SVG element. Courtesy of:
* http://stackoverflow.com/a/3642265/396414
*/
function makeSVG(tag, attrs) {
  var el= document.createElementNS('http://www.w3.org/2000/svg', tag)
  for (var k in attrs) el.setAttribute(k, attrs[k])
  return el
}

generateSpinner(30)