optical-gradient.jsx

const opticalGradient = [
  // bottom left rectangle 
  {x: 0, y: 60, start: 0.5, end: 0 },
  // top left rectangle 
  {x: 0, y: 0, start: 0.5, end: 0.75 },
  // top right rectangle 
  {x: 60, y: 0, start: 0.75, end: 0.9 },
  // bottom right rectangle 
  {x: 60, y: 60, start: 0.9, end: 1 },
];

const OpticalGradient = props => {
  return props.definitions.map(
    ({ x, y, start, end }) => [
      <linearGradient id={`gradient-${x}-${y}`} key="gradient">
        <stop offset="0%" stopColor="#FFF" stopOpacity={start} />
        <stop offset="100%" stopColor="#FFF" stopOpacity={end} />
      </linearGradient>,
      <rect
        key="rectangle"
        x={x}
        y={y}
        width={60}
        height={60}
        fill={`url(#gradient-${x}-${y})`}
      />
    ]
  );
};

const LoadingSpinner = () => {
  return (
    <svg>
      {/* outer circle */}
      <OpticalGradient definitions={definitions} />
      {/* arc */}
    </svg>
  );
};

@xavcz Thank you for the great article!

I noticed a small typo. I think that line 35 should read:

<OpticalGradient definitions={opticalGradient} />