Triangles
Home
Snippets
Triangles
HTML
CSS
JS
<div class="loader"> <span></span> <span></span> <span></span> </div>
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, #222222, #010101); overflow: hidden; } .loader { width: 15vmin; height: 15vmin; background: conic-gradient(from 150deg at 50% 14%, #c8ff00 0 60deg, #fff0 0 100%); position: relative; } .loader span { width: 100%; height: 100%; background: conic-gradient(from 150deg at 50% 14%, #c8ff00 0 60deg, #fff0 0 100%); position: absolute; transform-origin: 100% 100%; transform: rotate(60deg); animation: spin 1.5s ease-in-out -1.245s infinite; } .loader span+span { transform-origin: 0% 100%; } .loader span+span+span { transform-origin: 50% 14%; } @keyframes spin { 100% { transform: rotate(300deg); } }
//javascript
Ad #1
Ad #2
Scroll to Top