Nov 13, 2022627 views
CSSAdd prefixes
1.pl { 2 display: block; 3 width: 9.375em; 4 height: 9.375em; 5} 6 7.pl__arrows, 8.pl__ring-rotate, 9.pl__ring-stroke, 10.pl__tick { 11 animation-duration: 2s; 12 animation-timing-function: linear; 13 animation-iteration-count: infinite; 14} 15 16.pl__arrows { 17 animation-name: arrows42; 18 transform: rotate(45deg); 19 transform-origin: 16px 52px; 20} 21 22.pl__ring-rotate, 23.pl__ring-stroke { 24 transform-origin: 80px 80px; 25} 26 27.pl__ring-rotate { 28 animation-name: ringRotate42; 29} 30 31.pl__ring-stroke { 32 animation-name: ringStroke42; 33 transform: rotate(-45deg); 34} 35 36.pl__tick { 37 animation-name: tick42; 38} 39 40.pl__tick:nth-child(2) { 41 animation-delay: -1.75s; 42} 43 44.pl__tick:nth-child(3) { 45 animation-delay: -1.5s; 46} 47 48.pl__tick:nth-child(4) { 49 animation-delay: -1.25s; 50} 51 52.pl__tick:nth-child(5) { 53 animation-delay: -1s; 54} 55 56.pl__tick:nth-child(6) { 57 animation-delay: -0.75s; 58} 59 60.pl__tick:nth-child(7) { 61 animation-delay: -0.5s; 62} 63 64.pl__tick:nth-child(8) { 65 animation-delay: -0.25s; 66} 67 68/* Animations */ 69@keyframes arrows42 { 70 from { 71 transform: rotate(45deg); 72 } 73 74 to { 75 transform: rotate(405deg); 76 } 77} 78 79@keyframes ringRotate42 { 80 from { 81 transform: rotate(0); 82 } 83 84 to { 85 transform: rotate(720deg); 86 } 87} 88 89@keyframes ringStroke42 { 90 from, 91 to { 92 stroke-dashoffset: 452; 93 transform: rotate(-45deg); 94 } 95 96 50% { 97 stroke-dashoffset: 169.5; 98 transform: rotate(-180deg); 99 } 100} 101 102@keyframes tick42 { 103 from, 104 3%, 105 47%, 106 to { 107 stroke-dashoffset: -12; 108 } 109 110 14%, 111 36% { 112 stroke-dashoffset: 0; 113 } 114}
HTML
1 <svg class="pl" viewBox="0 0 160 160" width="160px" height="160px" xmlns="http://www.w3.org/2000/svg"> 2 <defs> 3 <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1"> 4 <stop offset="0%" stop-color="#000"></stop> 5 <stop offset="100%" stop-color="#fff"></stop> 6 </linearGradient> 7 <mask id="mask1"> 8 <rect x="0" y="0" width="160" height="160" fill="url(#grad)"></rect> 9 </mask> 10 <mask id="mask2"> 11 <rect x="28" y="28" width="104" height="104" fill="url(#grad)"></rect> 12 </mask> 13 </defs> 14 15 <g> 16 <g class="pl__ring-rotate"> 17 <circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(223,90%,55%)" stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452" stroke-linecap="round" transform="rotate(-45,80,80)"></circle> 18 </g> 19 </g> 20 <g mask="url(#mask1)"> 21 <g class="pl__ring-rotate"> 22 <circle class="pl__ring-stroke" cx="80" cy="80" r="72" fill="none" stroke="hsl(193,90%,55%)" stroke-width="16" stroke-dasharray="452.39 452.39" stroke-dashoffset="452" stroke-linecap="round" transform="rotate(-45,80,80)"></circle> 23 </g> 24 </g> 25 26 <g> 27 <g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round" transform="translate(80,80)"> 28 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(-135,0,0) translate(0,40)"></polyline> 29 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(-90,0,0) translate(0,40)"></polyline> 30 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(-45,0,0) translate(0,40)"></polyline> 31 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(0,0,0) translate(0,40)"></polyline> 32 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(45,0,0) translate(0,40)"></polyline> 33 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(90,0,0) translate(0,40)"></polyline> 34 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(135,0,0) translate(0,40)"></polyline> 35 <polyline class="pl__tick" stroke="hsl(223,10%,90%)" points="0,2 0,14" transform="rotate(180,0,0) translate(0,40)"></polyline> 36 </g> 37 </g> 38 <g mask="url(#mask1)"> 39 <g stroke-width="4" stroke-dasharray="12 12" stroke-dashoffset="12" stroke-linecap="round" transform="translate(80,80)"> 40 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(-135,0,0) translate(0,40)"></polyline> 41 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(-90,0,0) translate(0,40)"></polyline> 42 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(-45,0,0) translate(0,40)"></polyline> 43 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(0,0,0) translate(0,40)"></polyline> 44 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(45,0,0) translate(0,40)"></polyline> 45 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(90,0,0) translate(0,40)"></polyline> 46 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(135,0,0) translate(0,40)"></polyline> 47 <polyline class="pl__tick" stroke="hsl(223,90%,80%)" points="0,2 0,14" transform="rotate(180,0,0) translate(0,40)"></polyline> 48 </g> 49 </g> 50 51 <g> 52 <g transform="translate(64,28)"> 53 <g class="pl__arrows" transform="rotate(45,16,52)"> 54 <path fill="hsl(3,90%,55%)" d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"></path> 55 <path fill="hsl(223,10%,90%)" d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"></path> 56 </g> 57 </g> 58 </g> 59 <g mask="url(#mask2)"> 60 <g transform="translate(64,28)"> 61 <g class="pl__arrows" transform="rotate(45,16,52)"> 62 <path fill="hsl(333,90%,55%)" d="M17.998,1.506l13.892,43.594c.455,1.426-.56,2.899-1.998,2.899H2.108c-1.437,0-2.452-1.473-1.998-2.899L14.002,1.506c.64-2.008,3.356-2.008,3.996,0Z"></path> 63 <path fill="hsl(223,90%,80%)" d="M14.009,102.499L.109,58.889c-.453-1.421,.559-2.889,1.991-2.889H29.899c1.433,0,2.444,1.468,1.991,2.889l-13.899,43.61c-.638,2.001-3.345,2.001-3.983,0Z"></path> 64 </g> 65 </g> 66 </g> 67 </svg>