<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 18 -7" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#40204c"/>
<stop offset="40%" stop-color="#a3225c"/>
<stop offset="100%" stop-color="#e24926"/>
</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: red;
background: -webkit-linear-gradient(left top, #152a8e, #b1376c);
background: -o-linear-gradient(bottom right, #152a8e, #b1376c);
background: -moz-linear-gradient(bottom right, #152a8e, #b1376c);
background: linear-gradient(to bottom right, #152a8e, #b1376c);
}
.loading_cont:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0px;
background: url(https://next.atcom.gr/StaticData/Landing2017/Content/Media/dots-transparent.png) repeat scroll center center;
opacity: 0.05;
z-index: 0;
}
#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
});
This Pen doesn't use any external CSS resources.