Squares Loader #4

HTML
<div class="wrapper"> <div class="square top"></div> <div class="square bottom"></div> </div>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #e0474c; } .square { border: 6px solid #2c3e50; border-radius: 5px; width: 80px; height: 80px; box-sizing: border-box; background: #fff; } .top { animation: fill 1.5s infinite; } .bottom { margin: 50px 50px; animation: fill 1.5s infinite reverse; } .wrapper { width: 150px; height: 150px; transform-origin: 50% 50%; animation: rotate 1.5s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes fill { 0% { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); } 50% { opacity: 0.2; transform: rotate(180deg) scale(0.5); filter: blur(5px); } 100% { opacity: 1; transform: rotate(0deg) scale(1); filter: blur(0); } }
JAVASCRIPT
Expand for more options Login