<html>
<div class="loader">
<div class="cube_loader1"></div>
<div class="cube_loader2"></div>
<div class="cube_loader3"></div>
<div class="cube_loader4"></div>
</div>
</html>
html {
height:100vh;
background-color:white;
}
.loader {
position:absolute;
left:50%;
margin-left:;
top:50%;
}
.cube_loader1 {
width:50px;
height:50px;
background-color:rgba(3,255,129,0.8);
border-radius:0%;
margin-left:0px;
position:absolute;
left:50%;
margin-left:2.5px;
top:50%;
margin-top:-56.5px;
border-radius:50%;
}
.cube_loader2 {
width:50px;
height:50px;
margin-left:55px;
background-color:rgba(3,255,129,0.8);
position:absolute;
left:50%;
margin-left:-56.5px;
top:50%;
margin-top:-56.5px;
border-radius:50%;
}
.cube_loader3 {
width:50px;
height:50px;
margin-top:55px;
background-color:rgba(3,255,129,0.8);
position:absolute;
left:50%;
margin-left:2.5px;
top:50%;
margin-top:2.5px;
border-radius:50%;
}
.cube_loader4 {
width:50px;
height:50px;
margin-top:55px;
margin-left:55px;
background-color:rgba(3,255,129,0.8);
position:absolute;
left:50%;
margin-left:-56.5px;
top:50%;
margin-top:2.5px;
border-radius:50%;
}
TweenMax.to($(".loader"), 5, {rotation:360, repeat:-1,ease: Power0.easeNone});
function doTween() {
TweenMax.set($(".cube_loader1"),{borderRadius:10,scale:0.7});
TweenMax.set($(".cube_loader2"),{borderRadius:10,scale:0.7});
TweenMax.set($(".cube_loader3"),{borderRadius:10,scale:0.7});
TweenMax.set($(".cube_loader4"),{borderRadius:10,scale:0.7});
TweenMax.to($(".cube_loader1"), 1, {y:59.5});
TweenMax.to($(".cube_loader1"), 1, {delay:1,x:-59.5});
TweenMax.to($(".cube_loader1"), 1, {delay:2,y:0});
TweenMax.to($(".cube_loader1"), 1, {delay:3,x:0});
TweenMax.to($(".cube_loader1"), 1, {borderRadius:50, yoyo:true, repeat:-1,ease: Power0.easeNone});
TweenMax.to($(".cube_loader2"), 1, {x:59.5});
TweenMax.to($(".cube_loader2"), 1, {delay:1,y:59.5});
TweenMax.to($(".cube_loader2"), 1, {delay:2,x:0});
TweenMax.to($(".cube_loader2"), 1, {delay:3,y:0});
TweenMax.to($(".cube_loader2"), 1, {borderRadius:50, yoyo:true, repeat:-1,ease: Power0.easeNone});
TweenMax.to($(".cube_loader3"), 1, {x:-59.5});
TweenMax.to($(".cube_loader3"), 1, {delay:1,y:-59.5});
TweenMax.to($(".cube_loader3"), 1, {delay:2,x:0});
TweenMax.to($(".cube_loader3"), 1, {delay:3,y:0});
TweenMax.to($(".cube_loader3"), 1, {borderRadius:50, yoyo:true, repeat:-1,ease: Power0.easeNone});
TweenMax.to($(".cube_loader4"), 1, {y:-59.5});
TweenMax.to($(".cube_loader4"), 1, {delay:1,x:59.5});
TweenMax.to($(".cube_loader4"), 1, {delay:2,y:0});
TweenMax.to($(".cube_loader4"), 1, {delay:3,x:0});
TweenMax.to($(".cube_loader4"), 1, {borderRadius:50, yoyo:true, repeat:-1,ease: Power0.easeNone});
TweenMax.to($(),1,{delay:3,onComplete:doTween});
}
doTween();
External CSS
This Pen doesn't use any external CSS resources.