<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
	});