Helix Loader
Home
Snippets
Helix Loader
HTML
CSS
JS
<div class="dna" id="dna"></div> <div class="label">DNA HELIX</div>
body { margin: 0; height: 100vh; background: radial-gradient(circle, #050505, #000); display: grid; place-items: center; overflow: hidden; font-family: system-ui, sans-serif; } .dna { position: relative; width: 200px; height: 320px; } .strand { position: absolute; left: 50%; width: 2px; height: 100%; background: rgba(255,255,255,0.15); } .node { position: absolute; width: 10px; height: 10px; background: #7cffcb; border-radius: 50%; box-shadow: 0 0 15px rgba(124,255,203,0.9); } .label { position: absolute; bottom: 24px; color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 3px; }
const dna = document.getElementById("dna"); const total = 20; let t = 0; for (let i = 0; i < total; i++) { const node = document.createElement("div"); node.className = "node"; dna.appendChild(node); } function animate() { const nodes = document.querySelectorAll(".node"); nodes.forEach((node, i) => { const angle = t + i * 0.4; const x = Math.sin(angle) * 40; const y = i * 14; node.style.left = `calc(50% + ${x}px)`; node.style.top = `${y}px`; node.style.opacity = (Math.cos(angle) + 1) / 2 + 0.2; }); t += 0.05; requestAnimationFrame(animate); } animate();
Ad #1
Ad #2
Scroll to Top