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'); }
Expand for more options Login