Square Loader
HTML
<div class="wrapper">
<div class="square-1"></div>
<div class="square-2"></div>
<div class="square-3"></div>
<div class="square-4"></div>
<div class="square-5"></div>
</div>
CSS
body {
background: #34495E;
}
@keyframes rotate {
0% { transform: rotate(0deg) scale(0); }
100% { transform: rotate(360deg) scale(1); }
}
.wrapper {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrapper > * {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.square-1 {
z-index: 5;
border: 4px solid #fd3267;
}
.square-1.animation {
animation: rotate 6s linear;
}
.square-2 {
z-index: 4;
border: 4px solid #66D9EF;
}
.square-2.animation {
animation: rotate 6s 1s linear;
}
.square-3 {
z-index: 3;
border: 4px solid #A6E22E;
}
.square-3.animation {
animation: rotate 6s 2s linear;
}
.square-4 {
z-index: 2;
border: 4px solid #FD971F;
}
.square-4.animation {
animation: rotate 6s 3s linear;
}
.square-5 {
z-index: 1;
border: 4px solid #9B59B6;
}
.square-5.animation {
animation: rotate 6s 4s linear;
}
JAVASCRIPT
var wrapper = $('.wrapper');
wrapper.children().addClass('animation');
setInterval(function() {
wrapper.children().removeClass('animation');
setTimeout(rotate, 500);
}, 14500);
function rotate() {
wrapper.children().addClass('animation');
}
