699 views
CSS
1.spinner .path { 2 animation: infinity-load 1.5s infinite cubic-bezier(.65,.05,.36,1) 3} 4 5@keyframes infinity-load { 6 to { 7 stroke-dashoffset: 10 8 } 9}
HTML
1<div class="spinner"> 2 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="none"> 3 <path stroke="#E91E63" stroke-width="1.5" d="M9.743 10.25c3.213 1.96 5.017 4.676 7.248 4.676 2.588 0 2.791-4.8.518-5.668-3.107-1.187-5.178 3.719-8.284 5.03-1.415.677-3.41 1.014-4.09-1.14-.251-.797-.13-1.65.133-2.442v0c.425-1.278 2.132-1.66 3.35-1.081.304.144.668.346 1.125.625z" stroke-dashoffset="100" stroke-dasharray="100" class="path"> 4 </path> 5 </svg> 6</div>