HTML
<div id="preloader">
<div id="status">
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall"></div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall"></div>
</div>
</div>
</div>
</div>
CSS
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #2196F3;
}
#status,
.portfolio-loader {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
.portfolio-loader {
margin-top: 25px;
}
.windows8 {
position: relative;
width: 50px;
height: 50px;
}
.windows8 .wBall {
position: absolute;
width: 48px;
height: 48px;
opacity: 0;
-webkit-transform: rotate(225deg);
-webkit-animation: orbit 7.15s infinite;
-ms-transform: rotate(225deg);
transform: rotate(225deg);
animation: orbit 7.15s infinite;
}
.windows8 .wBall .wInnerBall {
position: absolute;
width: 6px;
height: 6px;
background-color: #fff;
left: 0px;
top: 0px;
border-radius: 6px;
}
.windows8 #wBall_1 {
-webkit-animation-delay: 1.56s;
animation-delay: 1.56s;
}
.windows8 #wBall_2 {
-webkit-animation-delay: 0.31s;
animation-delay: 0.31s;
}
.windows8 #wBall_3 {
-webkit-animation-delay: 0.62s;
animation-delay: 0.62s;
}
.windows8 #wBall_4 {
-webkit-animation-delay: 0.94s;
animation-delay: 0.94s;
}
.windows8 #wBall_5 {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
@-webkit-keyframes orbit {
0% {
opacity: 1;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
7% {
opacity: 1;
-webkit-transform: rotate(300deg);
-webkit-animation-timing-function: linear;
-webkit-origin:0%;
}
30% {
opacity: 1;
-webkit-transform:rotate(410deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-origin:7%;
}
39% {
opacity: 1;
-webkit-transform: rotate(645deg);
-webkit-animation-timing-function: linear;
-webkit-origin:30%;
}
70% {
opacity: 1;
-webkit-transform: rotate(770deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:39%;
}
75% {
opacity: 1;
-webkit-transform: rotate(900deg);
-webkit-animation-timing-function: ease-out;
-webkit-origin:70%;
}
76% {
opacity: 0;
-webkit-transform:rotate(900deg);
}
100% {
opacity: 0;
-webkit-transform: rotate(900deg);
}
}
@keyframes orbit {
0% {
opacity: 1;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
7% {
opacity: 1;
transform: rotate(300deg);
animation-timing-function: linear;
origin:0%;
}
30% {
opacity: 1;
transform:rotate(410deg);
animation-timing-function: ease-in-out;
origin:7%;
}
39% {
opacity: 1;
transform: rotate(645deg);
animation-timing-function: linear;
origin:30%;
}
70% {
opacity: 1;
transform: rotate(770deg);
animation-timing-function: ease-out;
origin:39%;
}
75% {
opacity: 1;
transform: rotate(900deg);
animation-timing-function: ease-out;
origin:70%;
}
76% {
opacity: 0;
transform:rotate(900deg);
}
100% {
opacity: 0;
transform: rotate(900deg);
}
}
