Blue Glow-ish Loader #1

HTML
<div class="spin-dr"></div>
CSS
body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; } .spin-dr { box-sizing: border-box; position: relative; width: 150px; height: 150px; border: 8px solid transparent; border-radius: 50%; animation: loader 2s linear infinite, spin 0.5s linear infinite; filter: blur(3px) saturate(110); } .spin-dr::after { content:''; box-sizing: border-box; position: absolute; display: block; top: 30%; left: 30%; height:40%; width: 40%; border: 8px solid transparent; border-radius: 50%; animation: loader 1.5s linear infinite, spin 0.25s linear reverse infinite; } @keyframes loader { 0% {border-left-color:transparent;border-right-color:#013C80} 25% {border-top-color:transparent;border-bottom-color:#016dae} 50% {border-right-color:transparent;border-left-color:#009edb} 75% {border-bottom-color:transparent;border-top-color:#016dae} 100% {border-left-color:transparent;border-right-color:#013C80} } @keyframes spin { 0% {transform: rotate(0deg)} 100% {transform: rotate(-360deg)} }
JAVASCRIPT
Expand for more options Login