<svg class="Animation" width="140px" height="140px" viewBox="0 0 140 140">
  <linearGradient id="Animation-gradient" gradientUnits="userSpaceOnUse" x1="70" y1="-1.383" x2="70" y2="-182.3596" gradientTransform="matrix(0.7071 0.7071 0.7071 -0.7071 77.0711 -36.066)">
    <stop offset="0" style="stop-color:#008EEC"/>
    <stop offset="1" style="stop-color:#33E3C9"/>
  </linearGradient>
  <path fill="url(#Animation-gradient)" d="M70,1.43C32.13,1.43,1.43,32.13,1.43,70s30.7,68.57,68.57,68.57 s68.57-30.7,68.57-68.57S107.87,1.43,70,1.43z M70,104.29c-18.94,0-34.29-15.35-34.29-34.28S51.06,35.72,70,35.72 s34.29,15.36,34.29,34.29S88.94,104.29,70,104.29z"/>
</svg>

.Animation {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
}

var s = Snap(".Animation"); 

var d = s.ellipse(70, 70, 52, 52).attr({ stroke: '#ffffff', 'strokeWidth': 0, fill: 'none' });

var loop = "M70.21,121.13c0,0-0.1,0.22-0.2,0";
var loop_transform = "M98.39,112.6c-8.13,5.39-17.89,8.53-28.38,8.53";

var k = s.path({
  path: loop,
  fill: "none",
  stroke: "#ffffff",
  strokeWidth: "20.3",
  strokeMiterlimit: "10",
  strokeLinecap: "round"
});

var group_mask = s.group(d, k);

var anim_transform = function() { 
  setTimeout(function() {
    k.animate({ path: loop_transform }, 400, mina.easeinout,
              function() {
      anim_transform_frame2();
    }
             );
  }, 100);	    
}

var anim_transform_frame2 = function() {
  k.animate({ path: loop }, 400, mina.easeinout);
}

function anim_rotate( el ) {
  el.transform('r0,70,70');
  el.animate({ transform: 'r360,70,70'}, 1000, mina.easeinout, function() {
    setTimeout(function() {
      anim_rotate(el);
      anim_transform();
    }, 1000);
  }
            );
};

anim_transform();
anim_rotate( group_mask );