<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" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 13 -7" result="goo" />
        <feBlend in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <linearGradient id="MyGradient">
          <stop offset="0%"  stop-color="#42398B"/>
          <stop offset="35%" stop-color="#5751A9"/>
        
              
              <stop offset="60%" stop-color="#2C2761"/>
          <stop offset="100%" stop-color="#42398B"/>
        
            <stop offset="100%"  stop-color="#473E91"/>
      </linearGradient>
    </defs>
    <mask id="maska">
      <g class="blobs">
        <circle class="blob" cx="440" cy="250" r="30" transform="rotate(0) translate(0, 0) rotate(0)"/>
        <circle class="blob" cx="500" cy="320" r="70"  transform="rotate(0) translate(0, 0) rotate(0)"/>
        <circle class="blob" cx="300" cy="390" r="40"  transform="rotate(0) translate(0, 0) rotate(0)"/>
        <circle class="blob" cx="380" cy="390" r="80"  transform="rotate(0) translate(0, 0) rotate(0)"/>
        <circle class="blob" cx="470" cy="450" r="20"  transform="rotate(0) translate(0, 0) rotate(0)"/>
      </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: #24214C;

}



#loader {
  display: inline-block;
  position: relative;
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -400px;
}

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

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

.blob {
  fill: white;
}

  var radius = 8;
  TweenMax.staggerFromTo('.blob', 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
  });