Rotating Bars
Home
Snippets
Rotating Bars
HTML
CSS
JS
<div class="container"> <div class="loader"></div> </div>
body{ height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: black; } .container { display: flex; justify-content: center; } .loader { --color1: #3498db; --color2: #e74c3c; width: 3.75em; aspect-ratio: 1; position: relative; animation: spin 10000ms infinite linear; } .loader:before, .loader:after { content: ""; position: absolute; background: var(--color1); animation: squeeze 3000ms infinite; } .loader:after { background: var(--color2); animation-delay: -1.25s; border-radius: 50px; } @keyframes squeeze { 0% { inset: 0 2em 2em 0; } 12.5% { inset: 0 2em 0 0; } 25% { inset: 2em 2em 0 0; } 37.5% { inset: 2em 0 0 0; } 50% { inset: 2em 0 0 2em; } 62.5% { inset: 0 0 0 2em; } 75% { inset: 0 0 2em 2em; } 87.5% { inset: 0 0 2em 0; } 100% { inset: 0 2em 2em 0; } } @keyframes spin { to { transform: rotate(-360deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top