Nov 11, 2022439 views
CSSAdd prefixes
1.loading { 2 width: 124px; 3 height: 124px; 4} 5 6.loading svg { 7 display: block; 8 width: 100%; 9 height: 100%; 10} 11 12.circle { 13 transform: rotate(-90deg); 14 transform-origin: center; 15 stroke-dasharray: 380; 16 stroke-dashoffset: 380; 17 animation: circle_4 2s ease-in-out forwards; 18} 19 20.check { 21 stroke-dasharray: 45; 22 stroke-dashoffset: 45; 23 animation: check_4 0.2s 2s ease-in-out forwards; 24} 25 26@keyframes circle_4 { 27 0% { 28 stroke-dashoffset: 380; 29 } 30 31 100% { 32 stroke-dashoffset: 0; 33 } 34} 35 36@keyframes check_4 { 37 0% { 38 stroke-dashoffset: 45; 39 } 40 41 100% { 42 stroke-dashoffset: 90; 43 } 44}
HTML
1<div class="loading"> 2 <svg xmlns="http://www.w3.org/2000/svg" width="124" height="124" viewBox="0 0 124 124"> 3 <circle class="circle-loading" cx="62" cy="62" r="59" fill="none" stroke="hsl(271, 76%, 74%)" stroke-width="6px"></circle> 4 <circle class="circle" cx="62" cy="62" r="59" fill="none" stroke="hsl(271, 76%, 53%)" stroke-width="6px" stroke-linecap="round"></circle> 5 <polyline class="check" points="73.56 48.63 57.88 72.69 49.38 62" fill="none" stroke="hsl(271, 76%, 53%)" stroke-width="6px" stroke-linecap="round"></polyline> 6 </svg> 7</div>