Circular Gradient
Home
Snippets
Circular Gradient
HTML
CSS
JS
<svg class="spinner " width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <clipPath id="spinner-clip"> <circle cx="8" cy="8" r="8" fill="white"></circle> </clipPath> <foreignObject width="16" height="16"> <div class="spinner-div"></div> </foreignObject> </svg>
html,body { background: black; height: 100%; display: flex; align-items: center; justify-content: center; } .spinner-div { width: 100%; height: 100%; border-radius: 100%; background: conic-gradient(white, transparent); animation: loader-rotate 2s linear infinite; } @keyframes loader-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { transform: scale(5); }
//JavaScript
Ad #1
Ad #2
Scroll to Top