Glowing Animated Loader
Home
Snippets
Glowing Animated Loader
HTML
CSS
JS
<div class="ring"></div> <div class="ring blur"></div> <div class="orb"></div>
body{ margin:0; height:100vh; background:#050505; display:flex; justify-content:center; align-items:center; overflow:hidden; } .orb{ width:60px; height:60px; background:#00f7ff; border-radius:50%; } .orb{ box-shadow:0 0 20px #00f7ff, 0 0 60px #00f7ff; } .orb{ animation: pulse 1.5s infinite ease-in-out; } @keyframes pulse{ 0%{ transform:scale(1); opacity:0.6; } 50%{ transform:scale(1.6); opacity:1; } 100%{ transform:scale(1); opacity:0.6; } } .ring{ position:absolute; width:120px; height:120px; border:2px solid #00f7ff; border-radius:50%; opacity:0.4; } .ring{ animation: expand 2s infinite linear; } @keyframes expand{ 0%{ transform:scale(0.5); opacity:0.6; } 100%{ transform:scale(2.5); opacity:0; } } .blur{ filter:blur(25px); opacity:0.5; } .orb{ background:linear-gradient(45deg,#00f7ff,#7c3aed); box-shadow:0 0 30px #7c3aed, 0 0 80px #00f7ff; }
//javascript
Ad #1
Ad #2
Scroll to Top