A loading animation

loading.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px">
  <circle cx="100" cy="50" r="30" fill="#82c458">
    <animate attributeName="r" values="30;10;30;" dur="1.8s"
            calcMode="spline"
            keyTimes="0; 0.5; 1"
            keySplines="0.1, 0.2, 0.9, 0.8; 0.1, 0.2, 0.9, 0.8"
            repeatCount="indefinite" />
    <animateTransform
            attributeName="transform"
            begin="0s"
            dur="1.8s"
            type="rotate"
            values="360 100 100; 180 100 100; 0 100 100"
            calcMode="spline"
            keyTimes="0; 0.5; 1"
            keySplines="0.1, 0.2, 0.9, 0.8; 0.1, 0.2, 0.9, 0.8"
            repeatCount="indefinite"
          />
  </circle>
  <circle cx="100" cy="150" r="10" fill="#77bfe8">
    <animate attributeName="r" values="10;30;10;" dur="1.8s"
            calcMode="spline"
            keyTimes="0; 0.5; 1"
            keySplines="0.1, 0.2, 0.9, 0.8; 0.1, 0.2, 0.9, 0.8"
            repeatCount="indefinite" />
    <animateTransform
            attributeName="transform"
            begin="0s"
            dur="1.8s"
            type="rotate"
            values="360 100 100; 180 100 100; 0 100 100"
            calcMode="spline"
            keyTimes="0; 0.5; 1"
            keySplines="0.1, 0.2, 0.9, 0.8; 0.1, 0.2, 0.9, 0.8"
            repeatCount="indefinite"
          />
  </circle>
</svg>