Another Spinner :)

HTML
<span class="loader"> <span class="outer-circle"></span> <span class="inner-circle"> <span class="center"></span> </span> </span>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #222; } .loader { width: 80px; height: 80px; } .loader .outer-circle { display: block; position: absolute; margin: 0 auto; width: 80px; height: 80px; border-top: 7px solid #e74c3c; border-bottom: 7px solid #e74c3c; border-left: 7px solid transparent; border-right: 7px solid transparent; border-radius: 80px; box-shadow: 0 0 20px #e74c3c; animation: spin .666s linear .2s infinite; } .loader .inner-circle { display: block; position: absolute; margin: 20px 0 0 20px; width: 40px; height: 40px; border-top: 7px solid #e74c3c; border-bottom: 7px solid #e74c3c; border-left: 7px solid transparent; border-right: 7px solid transparent; border-radius: 40px; box-shadow: 0 0 20px #e74c3c; animation: spin-2 .555s linear .2s infinite; } .loader .inner-circle .center { display: block; margin: 5px 0 0 5px; width: 30px; height: 30px; background-color: #e74c3c; border-radius: 30px; animation: pulse .777s infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
JAVASCRIPT
Expand for more options Login