#212121
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}
Comments
MIT License