Loader by csemszepp
#212121
1@-webkit-keyframes sphere1Move { 2 0% { 3 width: 50px; 4 height: 50px; 5 left: 116px; 6 top: 116px; 7 z-index: 0; 8 } 9 10 10% { 11 width: 40px; 12 height: 40px; 13 } 14 15 20% { 16 width: 30px; 17 height: 30px; 18 } 19 20 30% { 21 width: 40px; 22 height: 40px; 23 } 24 25 45% { 26 left: 15px; 27 } 28 29 49% { 30 z-index: 0; 31 } 32 33 50% { 34 width: 50px; 35 height: 50px; 36 left: 20px; 37 top: 116px; 38 z-index: 10; 39 } 40 /*55%{left:15px;}*/ 41 60% { 42 width: 60px; 43 height: 60px; 44 } 45 46 80% { 47 width: 70px; 48 height: 70px; 49 } 50 51 90% { 52 width: 60px; 53 height: 60px; 54 } 55 56 99% { 57 z-index: 10; 58 } 59 60 100% { 61 width: 50px; 62 height: 50px; 63 left: 116px; 64 top: 116px; 65 z-index: 0; 66 } 67} 68 69@keyframes sphere1Move { 70 0% { 71 width: 50px; 72 height: 50px; 73 left: 116px; 74 top: 116px; 75 z-index: 0; 76 } 77 78 10% { 79 width: 40px; 80 height: 40px; 81 } 82 83 20% { 84 width: 30px; 85 height: 30px; 86 } 87 88 30% { 89 width: 40px; 90 height: 40px; 91 } 92 93 45% { 94 left: 15px; 95 } 96 97 49% { 98 z-index: 0; 99 } 100 101 50% { 102 width: 50px; 103 height: 50px; 104 left: 20px; 105 top: 116px; 106 z-index: 10; 107 } 108/* 55%{left:15px;}*/ 109 60% { 110 width: 60px; 111 height: 60px; 112 } 113 114 80% { 115 width: 70px; 116 height: 70px; 117 } 118 119 90% { 120 width: 60px; 121 height: 60px; 122 } 123 124 99% { 125 z-index: 10; 126 } 127 128 100% { 129 width: 50px; 130 height: 50px; 131 left: 116px; 132 top: 116px; 133 z-index: 0; 134 } 135} 136 137@-webkit-keyframes sphere2Move { 138 0% { 139 width: 50px; 140 height: 50px; 141 left: 116px; 142 top: 116px; 143 z-index: 0; 144 } 145 146 10% { 147 width: 40px; 148 height: 40px; 149 } 150 151 20% { 152 width: 30px; 153 height: 30px; 154 } 155 156 30% { 157 width: 40px; 158 height: 40px; 159 } 160 161 45% { 162 left: 217px; 163 } 164 165 49% { 166 z-index: 0; 167 } 168 169 50% { 170 width: 50px; 171 height: 50px; 172 left: 222px; 173 top: 116px; 174 z-index: 10; 175 } 176 /*55%{left:15px;}*/ 177 60% { 178 width: 60px; 179 height: 60px; 180 } 181 182 80% { 183 width: 70px; 184 height: 70px; 185 } 186 187 90% { 188 width: 60px; 189 height: 60px; 190 } 191 192 99% { 193 z-index: 10; 194 } 195 196 100% { 197 width: 50px; 198 height: 50px; 199 left: 116px; 200 top: 116px; 201 z-index: 0; 202 } 203} 204 205@keyframes sphere2Move { 206 0% { 207 width: 50px; 208 height: 50px; 209 left: 116px; 210 top: 116px; 211 z-index: 0; 212 } 213 214 10% { 215 width: 40px; 216 height: 40px; 217 } 218 219 20% { 220 width: 30px; 221 height: 30px; 222 } 223 224 30% { 225 width: 40px; 226 height: 40px; 227 } 228 229 45% { 230 left: 217px; 231 } 232 233 49% { 234 z-index: 0; 235 } 236 237 50% { 238 width: 50px; 239 height: 50px; 240 left: 222px; 241 top: 116px; 242 z-index: 10; 243 } 244 /*55%{left:15px;}*/ 245 60% { 246 width: 60px; 247 height: 60px; 248 } 249 250 80% { 251 width: 70px; 252 height: 70px; 253 } 254 255 90% { 256 width: 60px; 257 height: 60px; 258 } 259 260 99% { 261 z-index: 10; 262 } 263 264 100% { 265 width: 50px; 266 height: 50px; 267 left: 116px; 268 top: 116px; 269 z-index: 0; 270 } 271} 272 273.wrapper { 274 width: 300px; 275 height: 300px; 276 /*border:1px solid red;*/ 277 margin: 0 auto; 278 margin-top: 5%; 279 position: relative; 280} 281 282.hoop { 283 width: 80px; 284 height: 80px; 285 border-radius: 50%; 286 background: transparent; 287 box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541; 288 position: absolute; 289 left: 100px; 290 top: 100px; 291 z-index: 5; 292} 293 294.sphere1 { 295 width: 50px; 296 height: 50px; 297 border-radius: 50%; 298 background: #22A7F0; 299 position: absolute; 300 left: 116px; 301 top: 116px; 302 box-shadow: -7px -7px 0 #1E8BC3 inset; 303 -webkit-animation: sphere1Move 1.2s linear infinite; 304 animation: sphere1Move 1.2s linear infinite; 305} 306 307.sphere2 { 308 width: 50px; 309 height: 50px; 310 border-radius: 50%; 311 background: #22A7F0; 312 position: absolute; 313 left: 116px; 314 top: 116px; 315 box-shadow: -7px -7px 0 #1E8BC3 inset; 316 -webkit-animation: sphere2Move 1.2s linear 0.6s infinite; 317 animation: sphere2Move 1.2s linear 0.6s infinite; 318}
615 views
615 views
MIT License