#e8e8e8
1.pl { 2 width: 6em; 3 height: 6em; 4} 5 6.pl__ring { 7 animation: ringA 2s linear infinite; 8} 9 10.pl__ring--a { 11 stroke: #f42f25; 12} 13 14.pl__ring--b { 15 animation-name: ringB; 16 stroke: #f49725; 17} 18 19.pl__ring--c { 20 animation-name: ringC; 21 stroke: #255ff4; 22} 23 24.pl__ring--d { 25 animation-name: ringD; 26 stroke: #f42582; 27} 28 29/* Animations */ 30@keyframes ringA { 31 from, 4% { 32 stroke-dasharray: 0 660; 33 stroke-width: 20; 34 stroke-dashoffset: -330; 35 } 36 37 12% { 38 stroke-dasharray: 60 600; 39 stroke-width: 30; 40 stroke-dashoffset: -335; 41 } 42 43 32% { 44 stroke-dasharray: 60 600; 45 stroke-width: 30; 46 stroke-dashoffset: -595; 47 } 48 49 40%, 54% { 50 stroke-dasharray: 0 660; 51 stroke-width: 20; 52 stroke-dashoffset: -660; 53 } 54 55 62% { 56 stroke-dasharray: 60 600; 57 stroke-width: 30; 58 stroke-dashoffset: -665; 59 } 60 61 82% { 62 stroke-dasharray: 60 600; 63 stroke-width: 30; 64 stroke-dashoffset: -925; 65 } 66 67 90%, to { 68 stroke-dasharray: 0 660; 69 stroke-width: 20; 70 stroke-dashoffset: -990; 71 } 72} 73 74@keyframes ringB { 75 from, 12% { 76 stroke-dasharray: 0 220; 77 stroke-width: 20; 78 stroke-dashoffset: -110; 79 } 80 81 20% { 82 stroke-dasharray: 20 200; 83 stroke-width: 30; 84 stroke-dashoffset: -115; 85 } 86 87 40% { 88 stroke-dasharray: 20 200; 89 stroke-width: 30; 90 stroke-dashoffset: -195; 91 } 92 93 48%, 62% { 94 stroke-dasharray: 0 220; 95 stroke-width: 20; 96 stroke-dashoffset: -220; 97 } 98 99 70% { 100 stroke-dasharray: 20 200; 101 stroke-width: 30; 102 stroke-dashoffset: -225; 103 } 104 105 90% { 106 stroke-dasharray: 20 200; 107 stroke-width: 30; 108 stroke-dashoffset: -305; 109 } 110 111 98%, to { 112 stroke-dasharray: 0 220; 113 stroke-width: 20; 114 stroke-dashoffset: -330; 115 } 116} 117 118@keyframes ringC { 119 from { 120 stroke-dasharray: 0 440; 121 stroke-width: 20; 122 stroke-dashoffset: 0; 123 } 124 125 8% { 126 stroke-dasharray: 40 400; 127 stroke-width: 30; 128 stroke-dashoffset: -5; 129 } 130 131 28% { 132 stroke-dasharray: 40 400; 133 stroke-width: 30; 134 stroke-dashoffset: -175; 135 } 136 137 36%, 58% { 138 stroke-dasharray: 0 440; 139 stroke-width: 20; 140 stroke-dashoffset: -220; 141 } 142 143 66% { 144 stroke-dasharray: 40 400; 145 stroke-width: 30; 146 stroke-dashoffset: -225; 147 } 148 149 86% { 150 stroke-dasharray: 40 400; 151 stroke-width: 30; 152 stroke-dashoffset: -395; 153 } 154 155 94%, to { 156 stroke-dasharray: 0 440; 157 stroke-width: 20; 158 stroke-dashoffset: -440; 159 } 160} 161 162@keyframes ringD { 163 from, 8% { 164 stroke-dasharray: 0 440; 165 stroke-width: 20; 166 stroke-dashoffset: 0; 167 } 168 169 16% { 170 stroke-dasharray: 40 400; 171 stroke-width: 30; 172 stroke-dashoffset: -5; 173 } 174 175 36% { 176 stroke-dasharray: 40 400; 177 stroke-width: 30; 178 stroke-dashoffset: -175; 179 } 180 181 44%, 50% { 182 stroke-dasharray: 0 440; 183 stroke-width: 20; 184 stroke-dashoffset: -220; 185 } 186 187 58% { 188 stroke-dasharray: 40 400; 189 stroke-width: 30; 190 stroke-dashoffset: -225; 191 } 192 193 78% { 194 stroke-dasharray: 40 400; 195 stroke-width: 30; 196 stroke-dashoffset: -395; 197 } 198 199 86%, to { 200 stroke-dasharray: 0 440; 201 stroke-width: 20; 202 stroke-dashoffset: -440; 203 } 204}
Comments
Variations
3 MIT License