svg-loaders-react/src/svg-loader-components/rings.js

React implementation of the SVG Loaders library by Sam Herbert

import React from 'react';

const Rings = ({
  className = undefined, // String
  ...props
}) => (
  <svg width={45} height={45} stroke="#fff" viewBox="0 0 45 45" className={`svg-loaders-svg${className ? ` ${className}` : ''}`} {...props}>
    <g
      fill="none"
      fillRule="evenodd"
      transform="translate(1 1)"
      strokeWidth={2}
    >
      <circle cx={22} cy={22} r={6} strokeOpacity={0}>
        <animate
          attributeName="r"
          begin="1.5s"
          dur="3s"
          values="6;22"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke-opacity"
          begin="1.5s"
          dur="3s"
          values="1;0"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke-width"
          begin="1.5s"
          dur="3s"
          values="2;0"
          calcMode="linear"
          repeatCount="indefinite"
        />
      </circle>
      <circle cx={22} cy={22} r={6} strokeOpacity={0}>
        <animate
          attributeName="r"
          begin="3s"
          dur="3s"
          values="6;22"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke-opacity"
          begin="3s"
          dur="3s"
          values="1;0"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke-width"
          begin="3s"
          dur="3s"
          values="2;0"
          calcMode="linear"
          repeatCount="indefinite"
        />
      </circle>
      <circle cx={22} cy={22} r={8}>
        <animate
          attributeName="r"
          begin="0s"
          dur="1.5s"
          values="6;1;2;3;4;5;6"
          calcMode="linear"
          repeatCount="indefinite"
        />
      </circle>
    </g>
  </svg>
);

export { Rings };