animate-the-spinner.jsx

const animation = 'spin 1.6s linear infinite';

const OpticalGradient = props => {
  return props.definitions.map(
    ({ x, y, start, end }) => [
      /* linear gradient */
      <rect
        key="rectangle"
        x={x}
        y={y}
        width={60}
        height={60}
        fill={`url(#gradient-${x}-${y})`}
        // the style prop is an object
        style={{ animation }}
      />
    ]
  );
};

const LoadingSpinner = () => {
  return (
    <svg viewBox="0 0 120 120" fill="transparent">
      {/*
       other elements
      */}
      <circle
        r={36}
        cx={60}
        cy={60}
        fill="transparent"
        stroke="url(#arc-gradient)"
        strokeWidth={2}
        // we re-use the animation defined above, 
        // make it turn in the opposite direction
        // and add a small delay to make it start before the opacity layer
        style={{ animation: `${animation} reverse -0.2s`}}
      />
    </svg>
  );
};