CSS
body { padding: 0; margin: 0; background-color: #3E3C41; font-family: 'Montserrat', sans-serif; }
body, html { width: 100%; height: 100%; }
.preloader {
width: 100%;
height: 100%;
background-color: #3E3C41;
z-index: 10;
position: absolute;
}
.circle {
opacity: 0;
border-radius: 190px;
box-shadow: 0 4px 8px rgba(0,0,0,.4);
position: absolute;
top: 50%;
left:50%;
}
.circle1 {
background-color: #7752d5;
width: 240px;
height: 240px;
margin-top: -120px;
margin-left: -120px;
}
.circle2 {
background-color: #8362d9;
width: 170px;
height: 170px;
margin-top: -85px;
margin-left: -85px;
}
.circle3 {
background-color: #9f88d6;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
JAVASCRIPT
var $circles = $(".circle"),
tl = new TimelineMax(),
imageUrls = [
+ getRandomNum(),
],
images = [];
function getRandomNum() {
return Math.floor(Math.random() * 10000);
}
function loaderOut() {
console.log("Image is done loading");
}
TweenMax.set($circles, { scale: 0 });
tl.insert(
TweenMax.staggerTo($circles.toArray(), 1, {
opacity: 1,
scale: 1,
ease: Power1.easeIn
}, .2)
);
tl.insert(
TweenMax.staggerTo($circles.toArray(), .5, {
scale: 1.2,
boxShadow: "0 25px 25px rgba(0,0,0,.4)",
repeat: -1,
yoyo: true,
ease: Power1.easeOut
}, .2), "-=.4"
);
