<div class="loading_cont">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="loader">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
        <feGaussianBlur stdDeviation="5" />
        <feComponentTransfer>
          <feFuncA type="linear" slope="180" intercept="-10"/>
        </feComponentTransfer>
        <feBlend in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <radialGradient id="MyGradient">
          <stop offset="00%" stop-color="royalBlue"/>
          <stop offset="80%" stop-color="seaGreen"/>
      </radialGradient>
    </defs>
    <mask id="maska">
      <g class="blobs">
        <circle class="blob" cx="49%" cy="53%" r="30"/>
        <circle class="blob" cx="47%" cy="45%" r="70"/>
        <circle class="blob" cx="50%" cy="52%" r="40"/>
        <circle class="blob" cx="45%" cy="47%" r="80"/>
        <circle class="blob" cx="53%" cy="49%" r="20"/>
      </g>
    </mask>
    <rect x="200" y="200"  mask="url(#maska)" fill="url(#MyGradient)" width="400" height="400">
  </svg>  
</div>

body {
 margin: 0;
 height: 100vh;
 overflow: hidden;
}

.loading_cont {
 width: 100%;
 height: 100%;
 background: white;
}

#loader {
  display: inline-block;
  position: relative;
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -400px;
  filter: drop-shadow(200px 200px 0 #f0f);
}

rect {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

.blobs {
 -webkit-filter: url("#goo");
 filter: url("#goo");
  
  
}

.blob {
  fill: white;
}
.belt {
  fill: red;
}
.mask {
  fill: white;
}

  var radius = 6;
  TweenMax.staggerFromTo('.blob,.belt,.mask', 4 ,{
    cycle: {
      attr:function(i) {
        var r = i*90;
        return {
          transform:'rotate('+r+') translate('+radius+',0.1) rotate('+(-r)+')'
        }      
      }
    }  
  },{
    cycle: {
      attr:function(i) {
        var r = i*90+360;
        return {
          transform:'rotate('+r+') translate('+radius+',0.1) rotate('+(-r)+')'
        }      
      }
    },
    ease:Linear.easeNone,
    repeat:-1
  });