Squares Loader #2

HTML
<div class="loader"> <span></span> <span></span> <span></span> <span></span> </div>
CSS
* { box-sizing: border-box; } body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #333; overflow: hidden; } @keyframes loader { 0% { transform: rotate(-45deg); } 50% { transform: rotate(-135deg); } 100% { transform: rotate(-225deg); } } @keyframes span-1 { 0% { transform: translate(0); } 50% { transform: translate(-200px,0); border-color: #EE4D68; } 100% { transform: translate(0); } } @keyframes span-2 { 0% { transform: translate(0); } 50% { transform: translate(200px,0); border-color: #875678; } 100% { transform: translate(0); } } @keyframes span-3 { 0% { transform: translate(0); } 50% { transform: translate(0,-200px); border-color: #F90; } 100% { transform: translate(0); } } @keyframes span-4 { 0% { transform: translate(0); } 50% { transform: translate(0,200px); border-color: #00E4F6; } 100% { transform: translate(0); } } .loader { width: 50px; height: 50px; position: relative; animation: loader 2s infinite ease-in-out; } .loader span { width: 50px; height: 50px; position: absolute; left: 0; top: 0; border: 2px solid #ddd; } .loader span:nth-child(1) { animation: span-1 2s ease-in-out infinite; } .loader span:nth-child(2) { animation: span-2 2s ease-in-out infinite; } .loader span:nth-child(3) { animation: span-3 2s ease-in-out infinite; } .loader span:nth-child(4) { animation: span-4 2s ease-in-out infinite; }
JAVASCRIPT
Expand for more options Login