Glowing Rings
Home
Snippets
Glowing Rings
HTML
CSS
JS
<div class="ring-loader"> <div class="ring"></div> <div class="ring"></div> <div class="ring"></div> </div>
body { height: 100vh; margin: 0; background: radial-gradient(#111, #000); display: flex; justify-content: center; align-items: center; } .ring-loader { position: relative; width: 100px; height: 100px; } .ring { width: 100px; height: 100px; box-shadow: 0 0 15px #0ff; border-radius: 50%; border: 4px solid transparent; border-top: 4px solid #0ff; position: absolute; top: 0; left: 0; animation: spin 2s linear infinite; } .ring:nth-child(2) { border-top-color: #f0f; animation-delay: 0.3s; transform: scale(0.85); box-shadow: 0 0 15px #f0f; } .ring:nth-child(3) { border-top-color: #ff0; animation-delay: 0.6s; transform: scale(0.7); box-shadow: 0 0 15px #ff0; } @keyframes spin { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1); } }
//javascript
Ad #1
Ad #2
Scroll to Top