├── pages └── index │ ├── index.wxss │ ├── index.json │ ├── index.js │ └── index.wxml ├── demo.gif ├── app.js ├── README.md ├── app.wxss ├── app.json ├── project.config.json └── utils └── loading.wxss /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joname1/wxapp-Loading/HEAD/demo.gif -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | 5 | } 6 | }) 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Wxapp-Loading 2 | 微信小程序Loading，不断更新中... 3 | 4 | # Usage 5 | 6 | * 全局引入 loading.wxss 7 | 8 | * 在页面插入`` 详情见文件 pages/index/index.wxml 9 | 10 | # Demo 11 | * PS: 在真机预览的画面是非常流畅的 12 | 13 | ![](demo.gif) 14 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | @import "utils/loading.wxss" 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 10rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | 7 | }, 8 | //事件处理函数 9 | bindViewTap: function() { 10 | 11 | }, 12 | onLoad: function () { 13 | console.log('onLoad') 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"white", 7 | "navigationBarBackgroundColor": "#003398", 8 | "navigationBarTitleText": "小程序Loading", 9 | "navigationBarTextStyle":"white" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "touristappid", 13 | "projectname": "1212", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "game": { 24 | "currentL": -1, 25 | "list": [] 26 | }, 27 | "miniprogram": { 28 | "current": -1, 29 | "list": [] 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /utils/loading.wxss: -------------------------------------------------------------------------------- 1 | .jk-wandering-cubes { 2 | margin: 40px auto; 3 | width: 40px; 4 | height: 40px; 5 | position: relative; 6 | } 7 | 8 | .jk-wandering-cubes .jk-cube { 9 | background-color: #67cf22; 10 | width: 10px; 11 | height: 10px; 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | -webkit-animation: jk-wanderingCube 1.8s ease-in-out -1.8s infinite both; 16 | animation: jk-wanderingCube 1.8s ease-in-out -1.8s infinite both; 17 | } 18 | 19 | .jk-wandering-cubes .jk-cube2 { 20 | -webkit-animation-delay: -0.9s; 21 | animation-delay: -0.9s; 22 | } 23 | 24 | @-webkit-keyframes jk-wanderingCube { 25 | 0% { 26 | -webkit-transform: rotate(0deg); 27 | transform: rotate(0deg); 28 | } 29 | 30 | 25% { 31 | -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); 32 | transform: translateX(30px) rotate(-90deg) scale(0.5); 33 | } 34 | 35 | 50% { 36 | -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); 37 | transform: translateX(30px) translateY(30px) rotate(-179deg); 38 | } 39 | 40 | 50.1% { 41 | -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); 42 | transform: translateX(30px) translateY(30px) rotate(-180deg); 43 | } 44 | 45 | 75% { 46 | -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); 47 | transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); 48 | } 49 | 50 | 100% { 51 | -webkit-transform: rotate(-360deg); 52 | transform: rotate(-360deg); 53 | } 54 | } 55 | 56 | @keyframes jk-wanderingCube { 57 | 0% { 58 | -webkit-transform: rotate(0deg); 59 | transform: rotate(0deg); 60 | } 61 | 62 | 25% { 63 | -webkit-transform: translateX(30px) rotate(-90deg) scale(0.5); 64 | transform: translateX(30px) rotate(-90deg) scale(0.5); 65 | } 66 | 67 | 50% { 68 | -webkit-transform: translateX(30px) translateY(30px) rotate(-179deg); 69 | transform: translateX(30px) translateY(30px) rotate(-179deg); 70 | } 71 | 72 | 50.1% { 73 | -webkit-transform: translateX(30px) translateY(30px) rotate(-180deg); 74 | transform: translateX(30px) translateY(30px) rotate(-180deg); 75 | } 76 | 77 | 75% { 78 | -webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); 79 | transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); 80 | } 81 | 82 | 100% { 83 | -webkit-transform: rotate(-360deg); 84 | transform: rotate(-360deg); 85 | } 86 | } 87 | 88 | .jk-rotating-plane { 89 | width: 40px; 90 | height: 40px; 91 | background-color: #67cf22; 92 | margin: 40px auto; 93 | -webkit-animation: jk-rotatePlane 1.2s infinite ease-in-out; 94 | animation: jk-rotatePlane 1.2s infinite ease-in-out; 95 | } 96 | 97 | @-webkit-keyframes jk-rotatePlane { 98 | 0% { 99 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 100 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 101 | } 102 | 103 | 50% { 104 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 105 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 106 | } 107 | 108 | 100% { 109 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 110 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 111 | } 112 | } 113 | 114 | @keyframes jk-rotatePlane { 115 | 0% { 116 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 117 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 118 | } 119 | 120 | 50% { 121 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 122 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 123 | } 124 | 125 | 100% { 126 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 127 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 128 | } 129 | } 130 | 131 | .jk-double-bounce { 132 | width: 40px; 133 | height: 40px; 134 | position: relative; 135 | margin: 40px auto; 136 | } 137 | 138 | .jk-double-bounce .jk-child { 139 | width: 100%; 140 | height: 100%; 141 | border-radius: 50%; 142 | background-color: #67cf22; 143 | opacity: 0.6; 144 | position: absolute; 145 | top: 0; 146 | left: 0; 147 | -webkit-animation: jk-doubleBounce 2s infinite ease-in-out; 148 | animation: jk-doubleBounce 2s infinite ease-in-out; 149 | } 150 | 151 | .jk-double-bounce .jk-double-bounce2 { 152 | -webkit-animation-delay: -1.0s; 153 | animation-delay: -1.0s; 154 | } 155 | 156 | @-webkit-keyframes jk-doubleBounce { 157 | 0%, 100% { 158 | -webkit-transform: scale(0); 159 | transform: scale(0); 160 | } 161 | 162 | 50% { 163 | -webkit-transform: scale(1); 164 | transform: scale(1); 165 | } 166 | } 167 | 168 | @keyframes jk-doubleBounce { 169 | 0%, 100% { 170 | -webkit-transform: scale(0); 171 | transform: scale(0); 172 | } 173 | 174 | 50% { 175 | -webkit-transform: scale(1); 176 | transform: scale(1); 177 | } 178 | } 179 | 180 | .jk-wave { 181 | margin: 40px auto; 182 | width: 50px; 183 | height: 40px; 184 | text-align: center; 185 | font-size: 10px; 186 | } 187 | 188 | .jk-wave .jk-rect { 189 | background-color: #67cf22; 190 | height: 100%; 191 | width: 6px; 192 | display: inline-block; 193 | -webkit-animation: jk-waveStretchDelay 1.2s infinite ease-in-out; 194 | animation: jk-waveStretchDelay 1.2s infinite ease-in-out; 195 | } 196 | 197 | .jk-wave .jk-rect1 { 198 | -webkit-animation-delay: -1.2s; 199 | animation-delay: -1.2s; 200 | } 201 | 202 | .jk-wave .jk-rect2 { 203 | -webkit-animation-delay: -1.1s; 204 | animation-delay: -1.1s; 205 | } 206 | 207 | .jk-wave .jk-rect3 { 208 | -webkit-animation-delay: -1s; 209 | animation-delay: -1s; 210 | } 211 | 212 | .jk-wave .jk-rect4 { 213 | -webkit-animation-delay: -0.9s; 214 | animation-delay: -0.9s; 215 | } 216 | 217 | .jk-wave .jk-rect5 { 218 | -webkit-animation-delay: -0.8s; 219 | animation-delay: -0.8s; 220 | } 221 | 222 | @-webkit-keyframes jk-waveStretchDelay { 223 | 0%, 40%, 100% { 224 | -webkit-transform: scaleY(0.4); 225 | transform: scaleY(0.4); 226 | } 227 | 228 | 20% { 229 | -webkit-transform: scaleY(1); 230 | transform: scaleY(1); 231 | } 232 | } 233 | 234 | @keyframes jk-waveStretchDelay { 235 | 0%, 40%, 100% { 236 | -webkit-transform: scaleY(0.4); 237 | transform: scaleY(0.4); 238 | } 239 | 240 | 20% { 241 | -webkit-transform: scaleY(1); 242 | transform: scaleY(1); 243 | } 244 | } 245 | 246 | .jk-chasing-dots { 247 | margin: 40px auto; 248 | width: 40px; 249 | height: 40px; 250 | position: relative; 251 | text-align: center; 252 | -webkit-animation: jk-chasingDotsRotate 2s infinite linear; 253 | animation: jk-chasingDotsRotate 2s infinite linear; 254 | } 255 | 256 | .jk-chasing-dots .jk-child { 257 | width: 60%; 258 | height: 60%; 259 | display: inline-block; 260 | position: absolute; 261 | top: 0; 262 | background-color: #67cf22; 263 | border-radius: 100%; 264 | -webkit-animation: jk-chasingDotsBounce 2s infinite ease-in-out; 265 | animation: jk-chasingDotsBounce 2s infinite ease-in-out; 266 | } 267 | 268 | .jk-chasing-dots .jk-dot2 { 269 | top: auto; 270 | bottom: 0; 271 | -webkit-animation-delay: -1s; 272 | animation-delay: -1s; 273 | } 274 | 275 | @-webkit-keyframes jk-chasingDotsRotate { 276 | 100% { 277 | -webkit-transform: rotate(360deg); 278 | transform: rotate(360deg); 279 | } 280 | } 281 | 282 | @keyframes jk-chasingDotsRotate { 283 | 100% { 284 | -webkit-transform: rotate(360deg); 285 | transform: rotate(360deg); 286 | } 287 | } 288 | 289 | @-webkit-keyframes jk-chasingDotsBounce { 290 | 0%, 100% { 291 | -webkit-transform: scale(0); 292 | transform: scale(0); 293 | } 294 | 295 | 50% { 296 | -webkit-transform: scale(1); 297 | transform: scale(1); 298 | } 299 | } 300 | 301 | @keyframes jk-chasingDotsBounce { 302 | 0%, 100% { 303 | -webkit-transform: scale(0); 304 | transform: scale(0); 305 | } 306 | 307 | 50% { 308 | -webkit-transform: scale(1); 309 | transform: scale(1); 310 | } 311 | } 312 | 313 | .jk-three-bounce { 314 | margin: 40px auto; 315 | width: 80px; 316 | text-align: center; 317 | } 318 | 319 | .jk-three-bounce .jk-child { 320 | width: 20px; 321 | height: 20px; 322 | background-color: #67cf22; 323 | border-radius: 100%; 324 | display: inline-block; 325 | -webkit-animation: jk-three-bounce 1.4s ease-in-out 0s infinite both; 326 | animation: jk-three-bounce 1.4s ease-in-out 0s infinite both; 327 | } 328 | 329 | .jk-three-bounce .jk-bounce1 { 330 | -webkit-animation-delay: -0.32s; 331 | animation-delay: -0.32s; 332 | } 333 | 334 | .jk-three-bounce .jk-bounce2 { 335 | -webkit-animation-delay: -0.16s; 336 | animation-delay: -0.16s; 337 | } 338 | 339 | @-webkit-keyframes jk-three-bounce { 340 | 0%, 80%, 100% { 341 | -webkit-transform: scale(0); 342 | transform: scale(0); 343 | } 344 | 345 | 40% { 346 | -webkit-transform: scale(1); 347 | transform: scale(1); 348 | } 349 | } 350 | 351 | @keyframes jk-three-bounce { 352 | 0%, 80%, 100% { 353 | -webkit-transform: scale(0); 354 | transform: scale(0); 355 | } 356 | 357 | 40% { 358 | -webkit-transform: scale(1); 359 | transform: scale(1); 360 | } 361 | } 362 | 363 | .jk-circle { 364 | margin: 40px auto; 365 | width: 40px; 366 | height: 40px; 367 | position: relative; 368 | } 369 | 370 | .jk-circle .jk-child { 371 | width: 100%; 372 | height: 100%; 373 | position: absolute; 374 | left: 0; 375 | top: 0; 376 | } 377 | 378 | .jk-circle .jk-child:before { 379 | content: ''; 380 | display: block; 381 | margin: 0 auto; 382 | width: 15%; 383 | height: 15%; 384 | background-color: #67cf22; 385 | border-radius: 100%; 386 | -webkit-animation: jk-circleBounceDelay 1.2s infinite ease-in-out both; 387 | animation: jk-circleBounceDelay 1.2s infinite ease-in-out both; 388 | } 389 | 390 | .jk-circle .jk-circle2 { 391 | -webkit-transform: rotate(30deg); 392 | -ms-transform: rotate(30deg); 393 | transform: rotate(30deg); 394 | } 395 | 396 | .jk-circle .jk-circle3 { 397 | -webkit-transform: rotate(60deg); 398 | -ms-transform: rotate(60deg); 399 | transform: rotate(60deg); 400 | } 401 | 402 | .jk-circle .jk-circle4 { 403 | -webkit-transform: rotate(90deg); 404 | -ms-transform: rotate(90deg); 405 | transform: rotate(90deg); 406 | } 407 | 408 | .jk-circle .jk-circle5 { 409 | -webkit-transform: rotate(120deg); 410 | -ms-transform: rotate(120deg); 411 | transform: rotate(120deg); 412 | } 413 | 414 | .jk-circle .jk-circle6 { 415 | -webkit-transform: rotate(150deg); 416 | -ms-transform: rotate(150deg); 417 | transform: rotate(150deg); 418 | } 419 | 420 | .jk-circle .jk-circle7 { 421 | -webkit-transform: rotate(180deg); 422 | -ms-transform: rotate(180deg); 423 | transform: rotate(180deg); 424 | } 425 | 426 | .jk-circle .jk-circle8 { 427 | -webkit-transform: rotate(210deg); 428 | -ms-transform: rotate(210deg); 429 | transform: rotate(210deg); 430 | } 431 | 432 | .jk-circle .jk-circle9 { 433 | -webkit-transform: rotate(240deg); 434 | -ms-transform: rotate(240deg); 435 | transform: rotate(240deg); 436 | } 437 | 438 | .jk-circle .jk-circle10 { 439 | -webkit-transform: rotate(270deg); 440 | -ms-transform: rotate(270deg); 441 | transform: rotate(270deg); 442 | } 443 | 444 | .jk-circle .jk-circle11 { 445 | -webkit-transform: rotate(300deg); 446 | -ms-transform: rotate(300deg); 447 | transform: rotate(300deg); 448 | } 449 | 450 | .jk-circle .jk-circle12 { 451 | -webkit-transform: rotate(330deg); 452 | -ms-transform: rotate(330deg); 453 | transform: rotate(330deg); 454 | } 455 | 456 | .jk-circle .jk-circle2:before { 457 | -webkit-animation-delay: -1.1s; 458 | animation-delay: -1.1s; 459 | } 460 | 461 | .jk-circle .jk-circle3:before { 462 | -webkit-animation-delay: -1s; 463 | animation-delay: -1s; 464 | } 465 | 466 | .jk-circle .jk-circle4:before { 467 | -webkit-animation-delay: -0.9s; 468 | animation-delay: -0.9s; 469 | } 470 | 471 | .jk-circle .jk-circle5:before { 472 | -webkit-animation-delay: -0.8s; 473 | animation-delay: -0.8s; 474 | } 475 | 476 | .jk-circle .jk-circle6:before { 477 | -webkit-animation-delay: -0.7s; 478 | animation-delay: -0.7s; 479 | } 480 | 481 | .jk-circle .jk-circle7:before { 482 | -webkit-animation-delay: -0.6s; 483 | animation-delay: -0.6s; 484 | } 485 | 486 | .jk-circle .jk-circle8:before { 487 | -webkit-animation-delay: -0.5s; 488 | animation-delay: -0.5s; 489 | } 490 | 491 | .jk-circle .jk-circle9:before { 492 | -webkit-animation-delay: -0.4s; 493 | animation-delay: -0.4s; 494 | } 495 | 496 | .jk-circle .jk-circle10:before { 497 | -webkit-animation-delay: -0.3s; 498 | animation-delay: -0.3s; 499 | } 500 | 501 | .jk-circle .jk-circle11:before { 502 | -webkit-animation-delay: -0.2s; 503 | animation-delay: -0.2s; 504 | } 505 | 506 | .jk-circle .jk-circle12:before { 507 | -webkit-animation-delay: -0.1s; 508 | animation-delay: -0.1s; 509 | } 510 | 511 | @-webkit-keyframes jk-circleBounceDelay { 512 | 0%, 80%, 100% { 513 | -webkit-transform: scale(0); 514 | transform: scale(0); 515 | } 516 | 517 | 40% { 518 | -webkit-transform: scale(1); 519 | transform: scale(1); 520 | } 521 | } 522 | 523 | @keyframes jk-circleBounceDelay { 524 | 0%, 80%, 100% { 525 | -webkit-transform: scale(0); 526 | transform: scale(0); 527 | } 528 | 529 | 40% { 530 | -webkit-transform: scale(1); 531 | transform: scale(1); 532 | } 533 | } 534 | 535 | .jk-cube-grid { 536 | width: 40px; 537 | height: 40px; 538 | margin: 40px auto; 539 | } 540 | 541 | .jk-cube-grid .jk-cube { 542 | width: 33.33%; 543 | height: 33.33%; 544 | background-color: #67cf22; 545 | float: left; 546 | -webkit-animation: jk-cubeGridScaleDelay 1.3s infinite ease-in-out; 547 | animation: jk-cubeGridScaleDelay 1.3s infinite ease-in-out; 548 | } 549 | 550 | .jk-cube-grid .jk-cube1 { 551 | -webkit-animation-delay: 0.2s; 552 | animation-delay: 0.2s; 553 | } 554 | 555 | .jk-cube-grid .jk-cube2 { 556 | -webkit-animation-delay: 0.3s; 557 | animation-delay: 0.3s; 558 | } 559 | 560 | .jk-cube-grid .jk-cube3 { 561 | -webkit-animation-delay: 0.4s; 562 | animation-delay: 0.4s; 563 | } 564 | 565 | .jk-cube-grid .jk-cube4 { 566 | -webkit-animation-delay: 0.1s; 567 | animation-delay: 0.1s; 568 | } 569 | 570 | .jk-cube-grid .jk-cube5 { 571 | -webkit-animation-delay: 0.2s; 572 | animation-delay: 0.2s; 573 | } 574 | 575 | .jk-cube-grid .jk-cube6 { 576 | -webkit-animation-delay: 0.3s; 577 | animation-delay: 0.3s; 578 | } 579 | 580 | .jk-cube-grid .jk-cube7 { 581 | -webkit-animation-delay: 0.0s; 582 | animation-delay: 0.0s; 583 | } 584 | 585 | .jk-cube-grid .jk-cube8 { 586 | -webkit-animation-delay: 0.1s; 587 | animation-delay: 0.1s; 588 | } 589 | 590 | .jk-cube-grid .jk-cube9 { 591 | -webkit-animation-delay: 0.2s; 592 | animation-delay: 0.2s; 593 | } 594 | 595 | @-webkit-keyframes jk-cubeGridScaleDelay { 596 | 0%, 70%, 100% { 597 | -webkit-transform: scale3D(1, 1, 1); 598 | transform: scale3D(1, 1, 1); 599 | } 600 | 601 | 35% { 602 | -webkit-transform: scale3D(0, 0, 1); 603 | transform: scale3D(0, 0, 1); 604 | } 605 | } 606 | 607 | @keyframes jk-cubeGridScaleDelay { 608 | 0%, 70%, 100% { 609 | -webkit-transform: scale3D(1, 1, 1); 610 | transform: scale3D(1, 1, 1); 611 | } 612 | 613 | 35% { 614 | -webkit-transform: scale3D(0, 0, 1); 615 | transform: scale3D(0, 0, 1); 616 | } 617 | } 618 | 619 | .jk-fading-circle { 620 | margin: 40px auto; 621 | width: 40px; 622 | height: 40px; 623 | position: relative; 624 | } 625 | 626 | .jk-fading-circle .jk-circle { 627 | width: 100%; 628 | height: 100%; 629 | position: absolute; 630 | left: 0; 631 | top: 0; 632 | } 633 | 634 | .jk-fading-circle .jk-circle:before { 635 | content: ''; 636 | display: block; 637 | margin: 0 auto; 638 | width: 15%; 639 | height: 15%; 640 | background-color: #67cf22; 641 | border-radius: 100%; 642 | -webkit-animation: jk-circleFadeDelay 1.2s infinite ease-in-out both; 643 | animation: jk-circleFadeDelay 1.2s infinite ease-in-out both; 644 | } 645 | 646 | .jk-fading-circle .jk-circle2 { 647 | -webkit-transform: rotate(30deg); 648 | -ms-transform: rotate(30deg); 649 | transform: rotate(30deg); 650 | } 651 | 652 | .jk-fading-circle .jk-circle3 { 653 | -webkit-transform: rotate(60deg); 654 | -ms-transform: rotate(60deg); 655 | transform: rotate(60deg); 656 | } 657 | 658 | .jk-fading-circle .jk-circle4 { 659 | -webkit-transform: rotate(90deg); 660 | -ms-transform: rotate(90deg); 661 | transform: rotate(90deg); 662 | } 663 | 664 | .jk-fading-circle .jk-circle5 { 665 | -webkit-transform: rotate(120deg); 666 | -ms-transform: rotate(120deg); 667 | transform: rotate(120deg); 668 | } 669 | 670 | .jk-fading-circle .jk-circle6 { 671 | -webkit-transform: rotate(150deg); 672 | -ms-transform: rotate(150deg); 673 | transform: rotate(150deg); 674 | } 675 | 676 | .jk-fading-circle .jk-circle7 { 677 | -webkit-transform: rotate(180deg); 678 | -ms-transform: rotate(180deg); 679 | transform: rotate(180deg); 680 | } 681 | 682 | .jk-fading-circle .jk-circle8 { 683 | -webkit-transform: rotate(210deg); 684 | -ms-transform: rotate(210deg); 685 | transform: rotate(210deg); 686 | } 687 | 688 | .jk-fading-circle .jk-circle9 { 689 | -webkit-transform: rotate(240deg); 690 | -ms-transform: rotate(240deg); 691 | transform: rotate(240deg); 692 | } 693 | 694 | .jk-fading-circle .jk-circle10 { 695 | -webkit-transform: rotate(270deg); 696 | -ms-transform: rotate(270deg); 697 | transform: rotate(270deg); 698 | } 699 | 700 | .jk-fading-circle .jk-circle11 { 701 | -webkit-transform: rotate(300deg); 702 | -ms-transform: rotate(300deg); 703 | transform: rotate(300deg); 704 | } 705 | 706 | .jk-fading-circle .jk-circle12 { 707 | -webkit-transform: rotate(330deg); 708 | -ms-transform: rotate(330deg); 709 | transform: rotate(330deg); 710 | } 711 | 712 | .jk-fading-circle .jk-circle2:before { 713 | -webkit-animation-delay: -1.1s; 714 | animation-delay: -1.1s; 715 | } 716 | 717 | .jk-fading-circle .jk-circle3:before { 718 | -webkit-animation-delay: -1s; 719 | animation-delay: -1s; 720 | } 721 | 722 | .jk-fading-circle .jk-circle4:before { 723 | -webkit-animation-delay: -0.9s; 724 | animation-delay: -0.9s; 725 | } 726 | 727 | .jk-fading-circle .jk-circle5:before { 728 | -webkit-animation-delay: -0.8s; 729 | animation-delay: -0.8s; 730 | } 731 | 732 | .jk-fading-circle .jk-circle6:before { 733 | -webkit-animation-delay: -0.7s; 734 | animation-delay: -0.7s; 735 | } 736 | 737 | .jk-fading-circle .jk-circle7:before { 738 | -webkit-animation-delay: -0.6s; 739 | animation-delay: -0.6s; 740 | } 741 | 742 | .jk-fading-circle .jk-circle8:before { 743 | -webkit-animation-delay: -0.5s; 744 | animation-delay: -0.5s; 745 | } 746 | 747 | .jk-fading-circle .jk-circle9:before { 748 | -webkit-animation-delay: -0.4s; 749 | animation-delay: -0.4s; 750 | } 751 | 752 | .jk-fading-circle .jk-circle10:before { 753 | -webkit-animation-delay: -0.3s; 754 | animation-delay: -0.3s; 755 | } 756 | 757 | .jk-fading-circle .jk-circle11:before { 758 | -webkit-animation-delay: -0.2s; 759 | animation-delay: -0.2s; 760 | } 761 | 762 | .jk-fading-circle .jk-circle12:before { 763 | -webkit-animation-delay: -0.1s; 764 | animation-delay: -0.1s; 765 | } 766 | 767 | @-webkit-keyframes jk-circleFadeDelay { 768 | 0%, 39%, 100% { 769 | opacity: 0; 770 | } 771 | 772 | 40% { 773 | opacity: 1; 774 | } 775 | } 776 | 777 | @keyframes jk-circleFadeDelay { 778 | 0%, 39%, 100% { 779 | opacity: 0; 780 | } 781 | 782 | 40% { 783 | opacity: 1; 784 | } 785 | } 786 | 787 | .jk-folding-cube { 788 | margin: 40px auto; 789 | width: 40px; 790 | height: 40px; 791 | position: relative; 792 | -webkit-transform: rotateZ(45deg); 793 | transform: rotateZ(45deg); 794 | } 795 | 796 | .jk-folding-cube .jk-cube { 797 | float: left; 798 | width: 50%; 799 | height: 50%; 800 | position: relative; 801 | -webkit-transform: scale(1.1); 802 | -ms-transform: scale(1.1); 803 | transform: scale(1.1); 804 | } 805 | 806 | .jk-folding-cube .jk-cube:before { 807 | content: ''; 808 | position: absolute; 809 | top: 0; 810 | left: 0; 811 | width: 100%; 812 | height: 100%; 813 | background-color: #67cf22; 814 | -webkit-animation: jk-foldCubeAngle 2.4s infinite linear both; 815 | animation: jk-foldCubeAngle 2.4s infinite linear both; 816 | -webkit-transform-origin: 100% 100%; 817 | -ms-transform-origin: 100% 100%; 818 | transform-origin: 100% 100%; 819 | } 820 | 821 | .jk-folding-cube .jk-cube2 { 822 | -webkit-transform: scale(1.1) rotateZ(90deg); 823 | transform: scale(1.1) rotateZ(90deg); 824 | } 825 | 826 | .jk-folding-cube .jk-cube3 { 827 | -webkit-transform: scale(1.1) rotateZ(180deg); 828 | transform: scale(1.1) rotateZ(180deg); 829 | } 830 | 831 | .jk-folding-cube .jk-cube4 { 832 | -webkit-transform: scale(1.1) rotateZ(270deg); 833 | transform: scale(1.1) rotateZ(270deg); 834 | } 835 | 836 | .jk-folding-cube .jk-cube2:before { 837 | -webkit-animation-delay: 0.3s; 838 | animation-delay: 0.3s; 839 | } 840 | 841 | .jk-folding-cube .jk-cube3:before { 842 | -webkit-animation-delay: 0.6s; 843 | animation-delay: 0.6s; 844 | } 845 | 846 | .jk-folding-cube .jk-cube4:before { 847 | -webkit-animation-delay: 0.9s; 848 | animation-delay: 0.9s; 849 | } 850 | 851 | @-webkit-keyframes jk-foldCubeAngle { 852 | 0%, 10% { 853 | -webkit-transform: perspective(140px) rotateX(-180deg); 854 | transform: perspective(140px) rotateX(-180deg); 855 | opacity: 0; 856 | } 857 | 858 | 25%, 75% { 859 | -webkit-transform: perspective(140px) rotateX(0deg); 860 | transform: perspective(140px) rotateX(0deg); 861 | opacity: 1; 862 | } 863 | 864 | 90%, 100% { 865 | -webkit-transform: perspective(140px) rotateY(180deg); 866 | transform: perspective(140px) rotateY(180deg); 867 | opacity: 0; 868 | } 869 | } 870 | 871 | @keyframes jk-foldCubeAngle { 872 | 0%, 10% { 873 | -webkit-transform: perspective(140px) rotateX(-180deg); 874 | transform: perspective(140px) rotateX(-180deg); 875 | opacity: 0; 876 | } 877 | 878 | 25%, 75% { 879 | -webkit-transform: perspective(140px) rotateX(0deg); 880 | transform: perspective(140px) rotateX(0deg); 881 | opacity: 1; 882 | } 883 | 884 | 90%, 100% { 885 | -webkit-transform: perspective(140px) rotateY(180deg); 886 | transform: perspective(140px) rotateY(180deg); 887 | opacity: 0; 888 | } 889 | } 890 | .container { 891 | background: #003398; 892 | 893 | align-items: center; 894 | } 895 | 896 | .loader{ 897 | height: 100px; 898 | 899 | width:100px; 900 | margin:0 auto; 901 | 902 | } 903 | 904 | @-webkit-keyframes scale { 905 | 0% { 906 | -webkit-transform: scale(1); 907 | transform: scale(1); 908 | opacity: 1; } 909 | 910 | 45% { 911 | -webkit-transform: scale(0.1); 912 | transform: scale(0.1); 913 | opacity: 0.7; } 914 | 915 | 80% { 916 | -webkit-transform: scale(1); 917 | transform: scale(1); 918 | opacity: 1; } } 919 | @keyframes scale { 920 | 0% { 921 | -webkit-transform: scale(1); 922 | transform: scale(1); 923 | opacity: 1; } 924 | 925 | 45% { 926 | -webkit-transform: scale(0.1); 927 | transform: scale(0.1); 928 | opacity: 0.7; } 929 | 930 | 80% { 931 | -webkit-transform: scale(1); 932 | transform: scale(1); 933 | opacity: 1; } } 934 | 935 | .ball-pulse > div:nth-child(0) { 936 | -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); 937 | animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); } 938 | .ball-pulse > div:nth-child(1) { 939 | -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); 940 | animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); } 941 | .ball-pulse > div:nth-child(2) { 942 | -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); 943 | animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); } 944 | .ball-pulse > div:nth-child(3) { 945 | -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); 946 | animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); } 947 | .ball-pulse > div { 948 | background-color: #fff; 949 | width: 15px; 950 | height: 15px; 951 | border-radius: 100%; 952 | margin: 2px; 953 | -webkit-animation-fill-mode: both; 954 | animation-fill-mode: both; 955 | display: inline-block; } 956 | 957 | @-webkit-keyframes ball-pulse-sync { 958 | 33% { 959 | -webkit-transform: translateY(10px); 960 | transform: translateY(10px); } 961 | 962 | 66% { 963 | -webkit-transform: translateY(-10px); 964 | transform: translateY(-10px); } 965 | 966 | 100% { 967 | -webkit-transform: translateY(0); 968 | transform: translateY(0); } } 969 | 970 | @keyframes ball-pulse-sync { 971 | 33% { 972 | -webkit-transform: translateY(10px); 973 | transform: translateY(10px); } 974 | 975 | 66% { 976 | -webkit-transform: translateY(-10px); 977 | transform: translateY(-10px); } 978 | 979 | 100% { 980 | -webkit-transform: translateY(0); 981 | transform: translateY(0); } } 982 | 983 | .ball-pulse-sync > div:nth-child(0) { 984 | -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; 985 | animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; } 986 | .ball-pulse-sync > div:nth-child(1) { 987 | -webkit-animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; 988 | animation: ball-pulse-sync 0.6s 0.07s infinite ease-in-out; } 989 | .ball-pulse-sync > div:nth-child(2) { 990 | -webkit-animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; 991 | animation: ball-pulse-sync 0.6s 0.14s infinite ease-in-out; } 992 | .ball-pulse-sync > div:nth-child(3) { 993 | -webkit-animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; 994 | animation: ball-pulse-sync 0.6s 0.21s infinite ease-in-out; } 995 | .ball-pulse-sync > div { 996 | background-color: #fff; 997 | width: 15px; 998 | height: 15px; 999 | border-radius: 100%; 1000 | margin: 2px; 1001 | -webkit-animation-fill-mode: both; 1002 | animation-fill-mode: both; 1003 | display: inline-block; } 1004 | 1005 | @-webkit-keyframes ball-scale { 1006 | 0% { 1007 | -webkit-transform: scale(0); 1008 | transform: scale(0); } 1009 | 1010 | 100% { 1011 | -webkit-transform: scale(1); 1012 | transform: scale(1); 1013 | opacity: 0; } } 1014 | 1015 | @keyframes ball-scale { 1016 | 0% { 1017 | -webkit-transform: scale(0); 1018 | transform: scale(0); } 1019 | 1020 | 100% { 1021 | -webkit-transform: scale(1); 1022 | transform: scale(1); 1023 | opacity: 0; } } 1024 | 1025 | .ball-scale > div { 1026 | background-color: #fff; 1027 | width: 15px; 1028 | height: 15px; 1029 | border-radius: 100%; 1030 | margin: 2px; 1031 | -webkit-animation-fill-mode: both; 1032 | animation-fill-mode: both; 1033 | display: inline-block; 1034 | height: 60px; 1035 | width: 60px; 1036 | -webkit-animation: ball-scale 1s 0s ease-in-out infinite; 1037 | animation: ball-scale 1s 0s ease-in-out infinite; } 1038 | 1039 | @-webkit-keyframes rotate { 1040 | 0% { 1041 | -webkit-transform: rotate(0deg); 1042 | transform: rotate(0deg); } 1043 | 1044 | 50% { 1045 | -webkit-transform: rotate(180deg); 1046 | transform: rotate(180deg); } 1047 | 1048 | 100% { 1049 | -webkit-transform: rotate(360deg); 1050 | transform: rotate(360deg); } } 1051 | 1052 | @keyframes rotate { 1053 | 0% { 1054 | -webkit-transform: rotate(0deg); 1055 | transform: rotate(0deg); } 1056 | 1057 | 50% { 1058 | -webkit-transform: rotate(180deg); 1059 | transform: rotate(180deg); } 1060 | 1061 | 100% { 1062 | -webkit-transform: rotate(360deg); 1063 | transform: rotate(360deg); } } 1064 | 1065 | .ball-rotate { 1066 | position: relative; } 1067 | .ball-rotate > div { 1068 | background-color: #fff; 1069 | width: 15px; 1070 | height: 15px; 1071 | border-radius: 100%; 1072 | margin: 2px; 1073 | -webkit-animation-fill-mode: both; 1074 | animation-fill-mode: both; 1075 | position: relative; } 1076 | .ball-rotate > div:first-child { 1077 | -webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite; 1078 | animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite; } 1079 | .ball-rotate > div:before, .ball-rotate > div:after { 1080 | background-color: #fff; 1081 | width: 15px; 1082 | height: 15px; 1083 | border-radius: 100%; 1084 | margin: 2px; 1085 | content: ""; 1086 | position: absolute; 1087 | opacity: 0.8; } 1088 | .ball-rotate > div:before { 1089 | top: 0px; 1090 | left: -28px; } 1091 | .ball-rotate > div:after { 1092 | top: 0px; 1093 | left: 25px; } 1094 | 1095 | @keyframes rotate { 1096 | 0% { 1097 | -webkit-transform: rotate(0deg) scale(1); 1098 | transform: rotate(0deg) scale(1); } 1099 | 1100 | 50% { 1101 | -webkit-transform: rotate(180deg) scale(0.6); 1102 | transform: rotate(180deg) scale(0.6); } 1103 | 1104 | 100% { 1105 | -webkit-transform: rotate(360deg) scale(1); 1106 | transform: rotate(360deg) scale(1); } } 1107 | 1108 | .ball-clip-rotate > div { 1109 | background-color: #fff; 1110 | width: 15px; 1111 | height: 15px; 1112 | border-radius: 100%; 1113 | margin: 2px; 1114 | -webkit-animation-fill-mode: both; 1115 | animation-fill-mode: both; 1116 | border: 2px solid #fff; 1117 | border-bottom-color: transparent; 1118 | height: 25px; 1119 | width: 25px; 1120 | background: transparent !important; 1121 | display: inline-block; 1122 | -webkit-animation: rotate 0.75s 0s linear infinite; 1123 | animation: rotate 0.75s 0s linear infinite; } 1124 | 1125 | @keyframes rotate { 1126 | 0% { 1127 | -webkit-transform: rotate(0deg) scale(1); 1128 | transform: rotate(0deg) scale(1); } 1129 | 1130 | 50% { 1131 | -webkit-transform: rotate(180deg) scale(0.6); 1132 | transform: rotate(180deg) scale(0.6); } 1133 | 1134 | 100% { 1135 | -webkit-transform: rotate(360deg) scale(1); 1136 | transform: rotate(360deg) scale(1); } } 1137 | 1138 | @keyframes scale { 1139 | 30% { 1140 | -webkit-transform: scale(0.3); 1141 | transform: scale(0.3); } 1142 | 1143 | 100% { 1144 | -webkit-transform: scale(1); 1145 | transform: scale(1); } } 1146 | 1147 | .ball-clip-rotate-pulse { 1148 | position: relative; 1149 | -webkit-transform: translateY(-15px); 1150 | -ms-transform: translateY(-15px); 1151 | transform: translateY(-15px); } 1152 | .ball-clip-rotate-pulse > div { 1153 | -webkit-animation-fill-mode: both; 1154 | animation-fill-mode: both; 1155 | position: absolute; 1156 | top: 0px; 1157 | left: 0px; 1158 | border-radius: 100%; } 1159 | .ball-clip-rotate-pulse > div:first-child { 1160 | background: #fff; 1161 | height: 16px; 1162 | width: 16px; 1163 | top: 9px; 1164 | left: 9px; 1165 | -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; 1166 | animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; } 1167 | .ball-clip-rotate-pulse > div:last-child { 1168 | position: absolute; 1169 | border: 2px solid #fff; 1170 | width: 30px; 1171 | height: 30px; 1172 | background: transparent; 1173 | border: 2px solid; 1174 | border-color: #fff transparent #fff transparent; 1175 | -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; 1176 | animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; 1177 | -webkit-animation-duration: 1s; 1178 | animation-duration: 1s; } 1179 | 1180 | @keyframes rotate { 1181 | 0% { 1182 | -webkit-transform: rotate(0deg) scale(1); 1183 | transform: rotate(0deg) scale(1); } 1184 | 1185 | 50% { 1186 | -webkit-transform: rotate(180deg) scale(0.6); 1187 | transform: rotate(180deg) scale(0.6); } 1188 | 1189 | 100% { 1190 | -webkit-transform: rotate(360deg) scale(1); 1191 | transform: rotate(360deg) scale(1); } } 1192 | 1193 | .ball-clip-rotate-multiple { 1194 | position: relative; } 1195 | .ball-clip-rotate-multiple > div { 1196 | -webkit-animation-fill-mode: both; 1197 | animation-fill-mode: both; 1198 | position: absolute; 1199 | left: 0px; 1200 | top: 0px; 1201 | border: 2px solid #fff; 1202 | border-bottom-color: transparent; 1203 | border-top-color: transparent; 1204 | border-radius: 100%; 1205 | height: 35px; 1206 | width: 35px; 1207 | -webkit-animation: rotate 1s 0s ease-in-out infinite; 1208 | animation: rotate 1s 0s ease-in-out infinite; } 1209 | .ball-clip-rotate-multiple > div:last-child { 1210 | display: inline-block; 1211 | top: 10px; 1212 | left: 10px; 1213 | width: 15px; 1214 | height: 15px; 1215 | -webkit-animation-duration: 0.5s; 1216 | animation-duration: 0.5s; 1217 | border-color: #fff transparent #fff transparent; 1218 | -webkit-animation-direction: reverse; 1219 | animation-direction: reverse; } 1220 | 1221 | @-webkit-keyframes ball-scale-ripple { 1222 | 0% { 1223 | -webkit-transform: scale(0.1); 1224 | transform: scale(0.1); 1225 | opacity: 1; } 1226 | 1227 | 70% { 1228 | -webkit-transform: scale(1); 1229 | transform: scale(1); 1230 | opacity: 0.7; } 1231 | 1232 | 100% { 1233 | opacity: 0.0; } } 1234 | 1235 | @keyframes ball-scale-ripple { 1236 | 0% { 1237 | -webkit-transform: scale(0.1); 1238 | transform: scale(0.1); 1239 | opacity: 1; } 1240 | 1241 | 70% { 1242 | -webkit-transform: scale(1); 1243 | transform: scale(1); 1244 | opacity: 0.7; } 1245 | 1246 | 100% { 1247 | opacity: 0.0; } } 1248 | 1249 | .ball-scale-ripple > div { 1250 | -webkit-animation-fill-mode: both; 1251 | animation-fill-mode: both; 1252 | height: 50px; 1253 | width: 50px; 1254 | border-radius: 100%; 1255 | border: 2px solid #fff; 1256 | -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8); 1257 | animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8); } 1258 | 1259 | @-webkit-keyframes ball-scale-ripple-multiple { 1260 | 0% { 1261 | -webkit-transform: scale(0.1); 1262 | transform: scale(0.1); 1263 | opacity: 1; } 1264 | 1265 | 70% { 1266 | -webkit-transform: scale(1); 1267 | transform: scale(1); 1268 | opacity: 0.7; } 1269 | 1270 | 100% { 1271 | opacity: 0.0; } } 1272 | 1273 | @keyframes ball-scale-ripple-multiple { 1274 | 0% { 1275 | -webkit-transform: scale(0.1); 1276 | transform: scale(0.1); 1277 | opacity: 1; } 1278 | 1279 | 70% { 1280 | -webkit-transform: scale(1); 1281 | transform: scale(1); 1282 | opacity: 0.7; } 1283 | 1284 | 100% { 1285 | opacity: 0.0; } } 1286 | 1287 | .ball-scale-ripple-multiple { 1288 | position: relative; 1289 | -webkit-transform: translateY(-25px); 1290 | -ms-transform: translateY(-25px); 1291 | transform: translateY(-25px); } 1292 | .ball-scale-ripple-multiple > div:nth-child(0) { 1293 | -webkit-animation-delay: -0.2s; 1294 | animation-delay: -0.2s; } 1295 | .ball-scale-ripple-multiple > div:nth-child(1) { 1296 | -webkit-animation-delay: 0s; 1297 | animation-delay: 0s; } 1298 | .ball-scale-ripple-multiple > div:nth-child(2) { 1299 | -webkit-animation-delay: 0.2s; 1300 | animation-delay: 0.2s; } 1301 | .ball-scale-ripple-multiple > div:nth-child(3) { 1302 | -webkit-animation-delay: 0.4s; 1303 | animation-delay: 0.4s; } 1304 | .ball-scale-ripple-multiple > div { 1305 | -webkit-animation-fill-mode: both; 1306 | animation-fill-mode: both; 1307 | position: absolute; 1308 | top: 0; 1309 | left: 0; 1310 | width: 50px; 1311 | height: 50px; 1312 | border-radius: 100%; 1313 | border: 2px solid #fff; 1314 | -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8); 1315 | animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8); } 1316 | 1317 | @-webkit-keyframes ball-beat { 1318 | 50% { 1319 | opacity: 0.2; 1320 | -webkit-transform: scale(0.75); 1321 | transform: scale(0.75); } 1322 | 1323 | 100% { 1324 | opacity: 1; 1325 | -webkit-transform: scale(1); 1326 | transform: scale(1); } } 1327 | 1328 | @keyframes ball-beat { 1329 | 50% { 1330 | opacity: 0.2; 1331 | -webkit-transform: scale(0.75); 1332 | transform: scale(0.75); } 1333 | 1334 | 100% { 1335 | opacity: 1; 1336 | -webkit-transform: scale(1); 1337 | transform: scale(1); } } 1338 | 1339 | .ball-beat > div { 1340 | background-color: #fff; 1341 | width: 15px; 1342 | height: 15px; 1343 | border-radius: 100%; 1344 | margin: 2px; 1345 | -webkit-animation-fill-mode: both; 1346 | animation-fill-mode: both; 1347 | display: inline-block; 1348 | -webkit-animation: ball-beat 0.7s 0s infinite linear; 1349 | animation: ball-beat 0.7s 0s infinite linear; } 1350 | .ball-beat > div:nth-child(2n-1) { 1351 | -webkit-animation-delay: 0.35s !important; 1352 | animation-delay: 0.35s !important; } 1353 | 1354 | @-webkit-keyframes ball-scale-multiple { 1355 | 0% { 1356 | -webkit-transform: scale(0); 1357 | transform: scale(0); 1358 | opacity: 0; } 1359 | 1360 | 5% { 1361 | opacity: 1; } 1362 | 1363 | 100% { 1364 | -webkit-transform: scale(1); 1365 | transform: scale(1); 1366 | opacity: 0; } } 1367 | 1368 | @keyframes ball-scale-multiple { 1369 | 0% { 1370 | -webkit-transform: scale(0); 1371 | transform: scale(0); 1372 | opacity: 0; } 1373 | 1374 | 5% { 1375 | opacity: 1; } 1376 | 1377 | 100% { 1378 | -webkit-transform: scale(1); 1379 | transform: scale(1); 1380 | opacity: 0; } } 1381 | 1382 | .ball-scale-multiple { 1383 | position: relative; 1384 | -webkit-transform: translateY(-30px); 1385 | -ms-transform: translateY(-30px); 1386 | transform: translateY(-30px); } 1387 | .ball-scale-multiple > div:nth-child(2) { 1388 | -webkit-animation-delay: 0.2s; 1389 | animation-delay: 0.2s; } 1390 | .ball-scale-multiple > div:nth-child(3) { 1391 | -webkit-animation-delay: 0.4s; 1392 | animation-delay: 0.4s; } 1393 | .ball-scale-multiple > div { 1394 | background-color: #fff; 1395 | width: 15px; 1396 | height: 15px; 1397 | border-radius: 100%; 1398 | margin: 2px; 1399 | -webkit-animation-fill-mode: both; 1400 | animation-fill-mode: both; 1401 | position: absolute; 1402 | left: 0px; 1403 | top: 0px; 1404 | opacity: 0; 1405 | margin: 0; 1406 | width: 60px; 1407 | height: 60px; 1408 | -webkit-animation: ball-scale-multiple 1s 0s linear infinite; 1409 | animation: ball-scale-multiple 1s 0s linear infinite; } 1410 | 1411 | @-webkit-keyframes ball-triangle-path-1 { 1412 | 33% { 1413 | -webkit-transform: translate(25px, -50px); 1414 | transform: translate(25px, -50px); } 1415 | 1416 | 66% { 1417 | -webkit-transform: translate(50px, 0px); 1418 | transform: translate(50px, 0px); } 1419 | 1420 | 100% { 1421 | -webkit-transform: translate(0px, 0px); 1422 | transform: translate(0px, 0px); } } 1423 | 1424 | @keyframes ball-triangle-path-1 { 1425 | 33% { 1426 | -webkit-transform: translate(25px, -50px); 1427 | transform: translate(25px, -50px); } 1428 | 1429 | 66% { 1430 | -webkit-transform: translate(50px, 0px); 1431 | transform: translate(50px, 0px); } 1432 | 1433 | 100% { 1434 | -webkit-transform: translate(0px, 0px); 1435 | transform: translate(0px, 0px); } } 1436 | 1437 | @-webkit-keyframes ball-triangle-path-2 { 1438 | 33% { 1439 | -webkit-transform: translate(25px, 50px); 1440 | transform: translate(25px, 50px); } 1441 | 1442 | 66% { 1443 | -webkit-transform: translate(-25px, 50px); 1444 | transform: translate(-25px, 50px); } 1445 | 1446 | 100% { 1447 | -webkit-transform: translate(0px, 0px); 1448 | transform: translate(0px, 0px); } } 1449 | 1450 | @keyframes ball-triangle-path-2 { 1451 | 33% { 1452 | -webkit-transform: translate(25px, 50px); 1453 | transform: translate(25px, 50px); } 1454 | 1455 | 66% { 1456 | -webkit-transform: translate(-25px, 50px); 1457 | transform: translate(-25px, 50px); } 1458 | 1459 | 100% { 1460 | -webkit-transform: translate(0px, 0px); 1461 | transform: translate(0px, 0px); } } 1462 | 1463 | @-webkit-keyframes ball-triangle-path-3 { 1464 | 33% { 1465 | -webkit-transform: translate(-50px, 0px); 1466 | transform: translate(-50px, 0px); } 1467 | 1468 | 66% { 1469 | -webkit-transform: translate(-25px, -50px); 1470 | transform: translate(-25px, -50px); } 1471 | 1472 | 100% { 1473 | -webkit-transform: translate(0px, 0px); 1474 | transform: translate(0px, 0px); } } 1475 | 1476 | @keyframes ball-triangle-path-3 { 1477 | 33% { 1478 | -webkit-transform: translate(-50px, 0px); 1479 | transform: translate(-50px, 0px); } 1480 | 1481 | 66% { 1482 | -webkit-transform: translate(-25px, -50px); 1483 | transform: translate(-25px, -50px); } 1484 | 1485 | 100% { 1486 | -webkit-transform: translate(0px, 0px); 1487 | transform: translate(0px, 0px); } } 1488 | 1489 | .ball-triangle-path { 1490 | position: relative; 1491 | -webkit-transform: translate(-25px, -25px); 1492 | -ms-transform: translate(-25px, -25px); 1493 | transform: translate(-25px, -25px); } 1494 | .ball-triangle-path > div:nth-child(1) { 1495 | -webkit-animation-name: ball-triangle-path-1; 1496 | animation-name: ball-triangle-path-1; 1497 | -webkit-animation-delay: 0; 1498 | animation-delay: 0; 1499 | -webkit-animation-duration: 2s; 1500 | animation-duration: 2s; 1501 | -webkit-animation-timing-function: ease-in-out; 1502 | animation-timing-function: ease-in-out; 1503 | -webkit-animation-iteration-count: infinite; 1504 | animation-iteration-count: infinite; } 1505 | .ball-triangle-path > div:nth-child(2) { 1506 | -webkit-animation-name: ball-triangle-path-2; 1507 | animation-name: ball-triangle-path-2; 1508 | -webkit-animation-delay: 0; 1509 | animation-delay: 0; 1510 | -webkit-animation-duration: 2s; 1511 | animation-duration: 2s; 1512 | -webkit-animation-timing-function: ease-in-out; 1513 | animation-timing-function: ease-in-out; 1514 | -webkit-animation-iteration-count: infinite; 1515 | animation-iteration-count: infinite; } 1516 | .ball-triangle-path > div:nth-child(3) { 1517 | -webkit-animation-name: ball-triangle-path-3; 1518 | animation-name: ball-triangle-path-3; 1519 | -webkit-animation-delay: 0; 1520 | animation-delay: 0; 1521 | -webkit-animation-duration: 2s; 1522 | animation-duration: 2s; 1523 | -webkit-animation-timing-function: ease-in-out; 1524 | animation-timing-function: ease-in-out; 1525 | -webkit-animation-iteration-count: infinite; 1526 | animation-iteration-count: infinite; } 1527 | .ball-triangle-path > div { 1528 | -webkit-animation-fill-mode: both; 1529 | animation-fill-mode: both; 1530 | position: absolute; 1531 | width: 10px; 1532 | height: 10px; 1533 | border-radius: 100%; 1534 | border: 1px solid #fff; } 1535 | .ball-triangle-path > div:nth-of-type(1) { 1536 | top: 50px; } 1537 | .ball-triangle-path > div:nth-of-type(2) { 1538 | left: 25px; } 1539 | .ball-triangle-path > div:nth-of-type(3) { 1540 | top: 50px; 1541 | left: 50px; } 1542 | 1543 | @-webkit-keyframes ball-pulse-rise-even { 1544 | 0% { 1545 | -webkit-transform: scale(1.1); 1546 | transform: scale(1.1); } 1547 | 1548 | 25% { 1549 | -webkit-transform: translateY(-30px); 1550 | transform: translateY(-30px); } 1551 | 1552 | 50% { 1553 | -webkit-transform: scale(0.4); 1554 | transform: scale(0.4); } 1555 | 1556 | 75% { 1557 | -webkit-transform: translateY(30px); 1558 | transform: translateY(30px); } 1559 | 1560 | 100% { 1561 | -webkit-transform: translateY(0); 1562 | transform: translateY(0); 1563 | -webkit-transform: scale(1); 1564 | transform: scale(1); } } 1565 | 1566 | @keyframes ball-pulse-rise-even { 1567 | 0% { 1568 | -webkit-transform: scale(1.1); 1569 | transform: scale(1.1); } 1570 | 1571 | 25% { 1572 | -webkit-transform: translateY(-30px); 1573 | transform: translateY(-30px); } 1574 | 1575 | 50% { 1576 | -webkit-transform: scale(0.4); 1577 | transform: scale(0.4); } 1578 | 1579 | 75% { 1580 | -webkit-transform: translateY(30px); 1581 | transform: translateY(30px); } 1582 | 1583 | 100% { 1584 | -webkit-transform: translateY(0); 1585 | transform: translateY(0); 1586 | -webkit-transform: scale(1); 1587 | transform: scale(1); } } 1588 | 1589 | @-webkit-keyframes ball-pulse-rise-odd { 1590 | 0% { 1591 | -webkit-transform: scale(0.4); 1592 | transform: scale(0.4); } 1593 | 1594 | 25% { 1595 | -webkit-transform: translateY(30px); 1596 | transform: translateY(30px); } 1597 | 1598 | 50% { 1599 | -webkit-transform: scale(1.1); 1600 | transform: scale(1.1); } 1601 | 1602 | 75% { 1603 | -webkit-transform: translateY(-30px); 1604 | transform: translateY(-30px); } 1605 | 1606 | 100% { 1607 | -webkit-transform: translateY(0); 1608 | transform: translateY(0); 1609 | -webkit-transform: scale(0.75); 1610 | transform: scale(0.75); } } 1611 | 1612 | @keyframes ball-pulse-rise-odd { 1613 | 0% { 1614 | -webkit-transform: scale(0.4); 1615 | transform: scale(0.4); } 1616 | 1617 | 25% { 1618 | -webkit-transform: translateY(30px); 1619 | transform: translateY(30px); } 1620 | 1621 | 50% { 1622 | -webkit-transform: scale(1.1); 1623 | transform: scale(1.1); } 1624 | 1625 | 75% { 1626 | -webkit-transform: translateY(-30px); 1627 | transform: translateY(-30px); } 1628 | 1629 | 100% { 1630 | -webkit-transform: translateY(0); 1631 | transform: translateY(0); 1632 | -webkit-transform: scale(0.75); 1633 | transform: scale(0.75); } } 1634 | 1635 | .ball-pulse-rise > div { 1636 | background-color: #fff; 1637 | width: 15px; 1638 | height: 15px; 1639 | border-radius: 100%; 1640 | margin: 2px; 1641 | -webkit-animation-fill-mode: both; 1642 | animation-fill-mode: both; 1643 | display: inline-block; 1644 | -webkit-animation-duration: 1s; 1645 | animation-duration: 1s; 1646 | -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6); 1647 | animation-timing-function: cubic-bezier(.15, .46, .9, .6); 1648 | -webkit-animation-iteration-count: infinite; 1649 | animation-iteration-count: infinite; 1650 | -webkit-animation-delay: 0; 1651 | animation-delay: 0; } 1652 | .ball-pulse-rise > div:nth-child(2n) { 1653 | -webkit-animation-name: ball-pulse-rise-even; 1654 | animation-name: ball-pulse-rise-even; } 1655 | .ball-pulse-rise > div:nth-child(2n-1) { 1656 | -webkit-animation-name: ball-pulse-rise-odd; 1657 | animation-name: ball-pulse-rise-odd; } 1658 | 1659 | @-webkit-keyframes ball-grid-beat { 1660 | 50% { 1661 | opacity: 0.7; } 1662 | 1663 | 100% { 1664 | opacity: 1; } } 1665 | 1666 | @keyframes ball-grid-beat { 1667 | 50% { 1668 | opacity: 0.7; } 1669 | 1670 | 100% { 1671 | opacity: 1; } } 1672 | 1673 | .ball-grid-beat { 1674 | width: 57px; } 1675 | .ball-grid-beat > div:nth-child(1) { 1676 | -webkit-animation-delay: 0.36s; 1677 | animation-delay: 0.36s; 1678 | -webkit-animation-duration: 0.96s; 1679 | animation-duration: 0.96s; } 1680 | .ball-grid-beat > div:nth-child(2) { 1681 | -webkit-animation-delay: 0.4s; 1682 | animation-delay: 0.4s; 1683 | -webkit-animation-duration: 0.93s; 1684 | animation-duration: 0.93s; } 1685 | .ball-grid-beat > div:nth-child(3) { 1686 | -webkit-animation-delay: 0.68s; 1687 | animation-delay: 0.68s; 1688 | -webkit-animation-duration: 1.19s; 1689 | animation-duration: 1.19s; } 1690 | .ball-grid-beat > div:nth-child(4) { 1691 | -webkit-animation-delay: 0.41s; 1692 | animation-delay: 0.41s; 1693 | -webkit-animation-duration: 1.13s; 1694 | animation-duration: 1.13s; } 1695 | .ball-grid-beat > div:nth-child(5) { 1696 | -webkit-animation-delay: 0.71s; 1697 | animation-delay: 0.71s; 1698 | -webkit-animation-duration: 1.34s; 1699 | animation-duration: 1.34s; } 1700 | .ball-grid-beat > div:nth-child(6) { 1701 | -webkit-animation-delay: -0.15s; 1702 | animation-delay: -0.15s; 1703 | -webkit-animation-duration: 0.94s; 1704 | animation-duration: 0.94s; } 1705 | .ball-grid-beat > div:nth-child(7) { 1706 | -webkit-animation-delay: -0.12s; 1707 | animation-delay: -0.12s; 1708 | -webkit-animation-duration: 1.2s; 1709 | animation-duration: 1.2s; } 1710 | .ball-grid-beat > div:nth-child(8) { 1711 | -webkit-animation-delay: 0.01s; 1712 | animation-delay: 0.01s; 1713 | -webkit-animation-duration: 0.82s; 1714 | animation-duration: 0.82s; } 1715 | .ball-grid-beat > div:nth-child(9) { 1716 | -webkit-animation-delay: 0.32s; 1717 | animation-delay: 0.32s; 1718 | -webkit-animation-duration: 1.19s; 1719 | animation-duration: 1.19s; } 1720 | .ball-grid-beat > div { 1721 | background-color: #fff; 1722 | width: 15px; 1723 | height: 15px; 1724 | border-radius: 100%; 1725 | margin: 2px; 1726 | -webkit-animation-fill-mode: both; 1727 | animation-fill-mode: both; 1728 | display: inline-block; 1729 | float: left; 1730 | -webkit-animation-name: ball-grid-beat; 1731 | animation-name: ball-grid-beat; 1732 | -webkit-animation-iteration-count: infinite; 1733 | animation-iteration-count: infinite; 1734 | -webkit-animation-delay: 0; 1735 | animation-delay: 0; } 1736 | 1737 | @-webkit-keyframes ball-grid-pulse { 1738 | 0% { 1739 | -webkit-transform: scale(1); 1740 | transform: scale(1); } 1741 | 1742 | 50% { 1743 | -webkit-transform: scale(0.5); 1744 | transform: scale(0.5); 1745 | opacity: 0.7; } 1746 | 1747 | 100% { 1748 | -webkit-transform: scale(1); 1749 | transform: scale(1); 1750 | opacity: 1; } } 1751 | 1752 | @keyframes ball-grid-pulse { 1753 | 0% { 1754 | -webkit-transform: scale(1); 1755 | transform: scale(1); } 1756 | 1757 | 50% { 1758 | -webkit-transform: scale(0.5); 1759 | transform: scale(0.5); 1760 | opacity: 0.7; } 1761 | 1762 | 100% { 1763 | -webkit-transform: scale(1); 1764 | transform: scale(1); 1765 | opacity: 1; } } 1766 | 1767 | .ball-grid-pulse { 1768 | width: 57px; } 1769 | .ball-grid-pulse > div:nth-child(1) { 1770 | -webkit-animation-delay: -0.06s; 1771 | animation-delay: -0.06s; 1772 | -webkit-animation-duration: 0.72s; 1773 | animation-duration: 0.72s; } 1774 | .ball-grid-pulse > div:nth-child(2) { 1775 | -webkit-animation-delay: 0.25s; 1776 | animation-delay: 0.25s; 1777 | -webkit-animation-duration: 1.02s; 1778 | animation-duration: 1.02s; } 1779 | .ball-grid-pulse > div:nth-child(3) { 1780 | -webkit-animation-delay: -0.17s; 1781 | animation-delay: -0.17s; 1782 | -webkit-animation-duration: 1.28s; 1783 | animation-duration: 1.28s; } 1784 | .ball-grid-pulse > div:nth-child(4) { 1785 | -webkit-animation-delay: 0.48s; 1786 | animation-delay: 0.48s; 1787 | -webkit-animation-duration: 1.42s; 1788 | animation-duration: 1.42s; } 1789 | .ball-grid-pulse > div:nth-child(5) { 1790 | -webkit-animation-delay: 0.31s; 1791 | animation-delay: 0.31s; 1792 | -webkit-animation-duration: 1.45s; 1793 | animation-duration: 1.45s; } 1794 | .ball-grid-pulse > div:nth-child(6) { 1795 | -webkit-animation-delay: 0.03s; 1796 | animation-delay: 0.03s; 1797 | -webkit-animation-duration: 1.18s; 1798 | animation-duration: 1.18s; } 1799 | .ball-grid-pulse > div:nth-child(7) { 1800 | -webkit-animation-delay: 0.46s; 1801 | animation-delay: 0.46s; 1802 | -webkit-animation-duration: 0.87s; 1803 | animation-duration: 0.87s; } 1804 | .ball-grid-pulse > div:nth-child(8) { 1805 | -webkit-animation-delay: 0.78s; 1806 | animation-delay: 0.78s; 1807 | -webkit-animation-duration: 1.45s; 1808 | animation-duration: 1.45s; } 1809 | .ball-grid-pulse > div:nth-child(9) { 1810 | -webkit-animation-delay: 0.45s; 1811 | animation-delay: 0.45s; 1812 | -webkit-animation-duration: 1.06s; 1813 | animation-duration: 1.06s; } 1814 | .ball-grid-pulse > div { 1815 | background-color: #fff; 1816 | width: 15px; 1817 | height: 15px; 1818 | border-radius: 100%; 1819 | margin: 2px; 1820 | -webkit-animation-fill-mode: both; 1821 | animation-fill-mode: both; 1822 | display: inline-block; 1823 | float: left; 1824 | -webkit-animation-name: ball-grid-pulse; 1825 | animation-name: ball-grid-pulse; 1826 | -webkit-animation-iteration-count: infinite; 1827 | animation-iteration-count: infinite; 1828 | -webkit-animation-delay: 0; 1829 | animation-delay: 0; } 1830 | 1831 | @-webkit-keyframes ball-spin-fade-loader { 1832 | 50% { 1833 | opacity: 0.3; 1834 | -webkit-transform: scale(0.4); 1835 | transform: scale(0.4); } 1836 | 1837 | 100% { 1838 | opacity: 1; 1839 | -webkit-transform: scale(1); 1840 | transform: scale(1); } } 1841 | 1842 | @keyframes ball-spin-fade-loader { 1843 | 50% { 1844 | opacity: 0.3; 1845 | -webkit-transform: scale(0.4); 1846 | transform: scale(0.4); } 1847 | 1848 | 100% { 1849 | opacity: 1; 1850 | -webkit-transform: scale(1); 1851 | transform: scale(1); } } 1852 | 1853 | .ball-spin-fade-loader { 1854 | position: relative; } 1855 | .ball-spin-fade-loader > div:nth-child(1) { 1856 | top: 25px; 1857 | left: 0; 1858 | -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear; 1859 | animation: ball-spin-fade-loader 1s 0s infinite linear; } 1860 | .ball-spin-fade-loader > div:nth-child(2) { 1861 | top: 17.04545px; 1862 | left: 17.04545px; 1863 | -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear; 1864 | animation: ball-spin-fade-loader 1s 0.12s infinite linear; } 1865 | .ball-spin-fade-loader > div:nth-child(3) { 1866 | top: 0; 1867 | left: 25px; 1868 | -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear; 1869 | animation: ball-spin-fade-loader 1s 0.24s infinite linear; } 1870 | .ball-spin-fade-loader > div:nth-child(4) { 1871 | top: -17.04545px; 1872 | left: 17.04545px; 1873 | -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear; 1874 | animation: ball-spin-fade-loader 1s 0.36s infinite linear; } 1875 | .ball-spin-fade-loader > div:nth-child(5) { 1876 | top: -25px; 1877 | left: 0; 1878 | -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear; 1879 | animation: ball-spin-fade-loader 1s 0.48s infinite linear; } 1880 | .ball-spin-fade-loader > div:nth-child(6) { 1881 | top: -17.04545px; 1882 | left: -17.04545px; 1883 | -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear; 1884 | animation: ball-spin-fade-loader 1s 0.6s infinite linear; } 1885 | .ball-spin-fade-loader > div:nth-child(7) { 1886 | top: 0; 1887 | left: -25px; 1888 | -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear; 1889 | animation: ball-spin-fade-loader 1s 0.72s infinite linear; } 1890 | .ball-spin-fade-loader > div:nth-child(8) { 1891 | top: 17.04545px; 1892 | left: -17.04545px; 1893 | -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear; 1894 | animation: ball-spin-fade-loader 1s 0.84s infinite linear; } 1895 | .ball-spin-fade-loader > div { 1896 | background-color: #fff; 1897 | width: 15px; 1898 | height: 15px; 1899 | border-radius: 100%; 1900 | margin: 2px; 1901 | -webkit-animation-fill-mode: both; 1902 | animation-fill-mode: both; 1903 | position: absolute; } 1904 | 1905 | @-webkit-keyframes ball-spin-loader { 1906 | 75% { 1907 | opacity: 0.2; } 1908 | 1909 | 100% { 1910 | opacity: 1; } } 1911 | 1912 | @keyframes ball-spin-loader { 1913 | 75% { 1914 | opacity: 0.2; } 1915 | 1916 | 100% { 1917 | opacity: 1; } } 1918 | 1919 | .ball-spin-loader { 1920 | position: relative; } 1921 | .ball-spin-loader > span:nth-child(1) { 1922 | top: 45px; 1923 | left: 0; 1924 | -webkit-animation: ball-spin-loader 2s 0.9s infinite linear; 1925 | animation: ball-spin-loader 2s 0.9s infinite linear; } 1926 | .ball-spin-loader > span:nth-child(2) { 1927 | top: 30.68182px; 1928 | left: 30.68182px; 1929 | -webkit-animation: ball-spin-loader 2s 1.8s infinite linear; 1930 | animation: ball-spin-loader 2s 1.8s infinite linear; } 1931 | .ball-spin-loader > span:nth-child(3) { 1932 | top: 0; 1933 | left: 45px; 1934 | -webkit-animation: ball-spin-loader 2s 2.7s infinite linear; 1935 | animation: ball-spin-loader 2s 2.7s infinite linear; } 1936 | .ball-spin-loader > span:nth-child(4) { 1937 | top: -30.68182px; 1938 | left: 30.68182px; 1939 | -webkit-animation: ball-spin-loader 2s 3.6s infinite linear; 1940 | animation: ball-spin-loader 2s 3.6s infinite linear; } 1941 | .ball-spin-loader > span:nth-child(5) { 1942 | top: -45px; 1943 | left: 0; 1944 | -webkit-animation: ball-spin-loader 2s 4.5s infinite linear; 1945 | animation: ball-spin-loader 2s 4.5s infinite linear; } 1946 | .ball-spin-loader > span:nth-child(6) { 1947 | top: -30.68182px; 1948 | left: -30.68182px; 1949 | -webkit-animation: ball-spin-loader 2s 5.4s infinite linear; 1950 | animation: ball-spin-loader 2s 5.4s infinite linear; } 1951 | .ball-spin-loader > span:nth-child(7) { 1952 | top: 0; 1953 | left: -45px; 1954 | -webkit-animation: ball-spin-loader 2s 6.3s infinite linear; 1955 | animation: ball-spin-loader 2s 6.3s infinite linear; } 1956 | .ball-spin-loader > span:nth-child(8) { 1957 | top: 30.68182px; 1958 | left: -30.68182px; 1959 | -webkit-animation: ball-spin-loader 2s 7.2s infinite linear; 1960 | animation: ball-spin-loader 2s 7.2s infinite linear; } 1961 | .ball-spin-loader > div { 1962 | -webkit-animation-fill-mode: both; 1963 | animation-fill-mode: both; 1964 | position: absolute; 1965 | width: 15px; 1966 | height: 15px; 1967 | border-radius: 100%; 1968 | background: green; } 1969 | 1970 | @-webkit-keyframes ball-zig { 1971 | 33% { 1972 | -webkit-transform: translate(-15px, -30px); 1973 | transform: translate(-15px, -30px); } 1974 | 1975 | 66% { 1976 | -webkit-transform: translate(15px, -30px); 1977 | transform: translate(15px, -30px); } 1978 | 1979 | 100% { 1980 | -webkit-transform: translate(0, 0); 1981 | transform: translate(0, 0); } } 1982 | 1983 | @keyframes ball-zig { 1984 | 33% { 1985 | -webkit-transform: translate(-15px, -30px); 1986 | transform: translate(-15px, -30px); } 1987 | 1988 | 66% { 1989 | -webkit-transform: translate(15px, -30px); 1990 | transform: translate(15px, -30px); } 1991 | 1992 | 100% { 1993 | -webkit-transform: translate(0, 0); 1994 | transform: translate(0, 0); } } 1995 | 1996 | @-webkit-keyframes ball-zag { 1997 | 33% { 1998 | -webkit-transform: translate(15px, 30px); 1999 | transform: translate(15px, 30px); } 2000 | 2001 | 66% { 2002 | -webkit-transform: translate(-15px, 30px); 2003 | transform: translate(-15px, 30px); } 2004 | 2005 | 100% { 2006 | -webkit-transform: translate(0, 0); 2007 | transform: translate(0, 0); } } 2008 | 2009 | @keyframes ball-zag { 2010 | 33% { 2011 | -webkit-transform: translate(15px, 30px); 2012 | transform: translate(15px, 30px); } 2013 | 2014 | 66% { 2015 | -webkit-transform: translate(-15px, 30px); 2016 | transform: translate(-15px, 30px); } 2017 | 2018 | 100% { 2019 | -webkit-transform: translate(0, 0); 2020 | transform: translate(0, 0); } } 2021 | 2022 | .ball-zig-zag { 2023 | position: relative; 2024 | -webkit-transform: translate(-15px, -15px); 2025 | -ms-transform: translate(-15px, -15px); 2026 | transform: translate(-15px, -15px); } 2027 | .ball-zig-zag > div { 2028 | background-color: #fff; 2029 | width: 15px; 2030 | height: 15px; 2031 | border-radius: 100%; 2032 | margin: 2px; 2033 | -webkit-animation-fill-mode: both; 2034 | animation-fill-mode: both; 2035 | position: absolute; 2036 | margin-left: 15px; 2037 | top: 30px; 2038 | left: 30px; } 2039 | .ball-zig-zag > div:first-child { 2040 | -webkit-animation: ball-zig 0.7s 0s infinite linear; 2041 | animation: ball-zig 0.7s 0s infinite linear; } 2042 | .ball-zig-zag > div:last-child { 2043 | -webkit-animation: ball-zag 0.7s 0s infinite linear; 2044 | animation: ball-zag 0.7s 0s infinite linear; } 2045 | 2046 | @-webkit-keyframes ball-zig-deflect { 2047 | 17% { 2048 | -webkit-transform: translate(-15px, -30px); 2049 | transform: translate(-15px, -30px); } 2050 | 2051 | 34% { 2052 | -webkit-transform: translate(15px, -30px); 2053 | transform: translate(15px, -30px); } 2054 | 2055 | 50% { 2056 | -webkit-transform: translate(0, 0); 2057 | transform: translate(0, 0); } 2058 | 2059 | 67% { 2060 | -webkit-transform: translate(15px, -30px); 2061 | transform: translate(15px, -30px); } 2062 | 2063 | 84% { 2064 | -webkit-transform: translate(-15px, -30px); 2065 | transform: translate(-15px, -30px); } 2066 | 2067 | 100% { 2068 | -webkit-transform: translate(0, 0); 2069 | transform: translate(0, 0); } } 2070 | 2071 | @keyframes ball-zig-deflect { 2072 | 17% { 2073 | -webkit-transform: translate(-15px, -30px); 2074 | transform: translate(-15px, -30px); } 2075 | 2076 | 34% { 2077 | -webkit-transform: translate(15px, -30px); 2078 | transform: translate(15px, -30px); } 2079 | 2080 | 50% { 2081 | -webkit-transform: translate(0, 0); 2082 | transform: translate(0, 0); } 2083 | 2084 | 67% { 2085 | -webkit-transform: translate(15px, -30px); 2086 | transform: translate(15px, -30px); } 2087 | 2088 | 84% { 2089 | -webkit-transform: translate(-15px, -30px); 2090 | transform: translate(-15px, -30px); } 2091 | 2092 | 100% { 2093 | -webkit-transform: translate(0, 0); 2094 | transform: translate(0, 0); } } 2095 | 2096 | @-webkit-keyframes ball-zag-deflect { 2097 | 17% { 2098 | -webkit-transform: translate(15px, 30px); 2099 | transform: translate(15px, 30px); } 2100 | 2101 | 34% { 2102 | -webkit-transform: translate(-15px, 30px); 2103 | transform: translate(-15px, 30px); } 2104 | 2105 | 50% { 2106 | -webkit-transform: translate(0, 0); 2107 | transform: translate(0, 0); } 2108 | 2109 | 67% { 2110 | -webkit-transform: translate(-15px, 30px); 2111 | transform: translate(-15px, 30px); } 2112 | 2113 | 84% { 2114 | -webkit-transform: translate(15px, 30px); 2115 | transform: translate(15px, 30px); } 2116 | 2117 | 100% { 2118 | -webkit-transform: translate(0, 0); 2119 | transform: translate(0, 0); } } 2120 | 2121 | @keyframes ball-zag-deflect { 2122 | 17% { 2123 | -webkit-transform: translate(15px, 30px); 2124 | transform: translate(15px, 30px); } 2125 | 2126 | 34% { 2127 | -webkit-transform: translate(-15px, 30px); 2128 | transform: translate(-15px, 30px); } 2129 | 2130 | 50% { 2131 | -webkit-transform: translate(0, 0); 2132 | transform: translate(0, 0); } 2133 | 2134 | 67% { 2135 | -webkit-transform: translate(-15px, 30px); 2136 | transform: translate(-15px, 30px); } 2137 | 2138 | 84% { 2139 | -webkit-transform: translate(15px, 30px); 2140 | transform: translate(15px, 30px); } 2141 | 2142 | 100% { 2143 | -webkit-transform: translate(0, 0); 2144 | transform: translate(0, 0); } } 2145 | 2146 | .ball-zig-zag-deflect { 2147 | position: relative; 2148 | -webkit-transform: translate(-15px, -15px); 2149 | -ms-transform: translate(-15px, -15px); 2150 | transform: translate(-15px, -15px); } 2151 | .ball-zig-zag-deflect > div { 2152 | background-color: #fff; 2153 | width: 15px; 2154 | height: 15px; 2155 | border-radius: 100%; 2156 | margin: 2px; 2157 | -webkit-animation-fill-mode: both; 2158 | animation-fill-mode: both; 2159 | position: absolute; 2160 | margin-left: 15px; 2161 | top: 30px; 2162 | left: 30px; } 2163 | .ball-zig-zag-deflect > div:first-child { 2164 | -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear; 2165 | animation: ball-zig-deflect 1.5s 0s infinite linear; } 2166 | .ball-zig-zag-deflect > div:last-child { 2167 | -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear; 2168 | animation: ball-zag-deflect 1.5s 0s infinite linear; } 2169 | 2170 | /** 2171 | * Lines 2172 | */ 2173 | @-webkit-keyframes line-scale { 2174 | 0% { 2175 | -webkit-transform: scaley(1); 2176 | transform: scaley(1); } 2177 | 2178 | 50% { 2179 | -webkit-transform: scaley(0.4); 2180 | transform: scaley(0.4); } 2181 | 2182 | 100% { 2183 | -webkit-transform: scaley(1); 2184 | transform: scaley(1); } } 2185 | @keyframes line-scale { 2186 | 0% { 2187 | -webkit-transform: scaley(1); 2188 | transform: scaley(1); } 2189 | 2190 | 50% { 2191 | -webkit-transform: scaley(0.4); 2192 | transform: scaley(0.4); } 2193 | 2194 | 100% { 2195 | -webkit-transform: scaley(1); 2196 | transform: scaley(1); } } 2197 | 2198 | .line-scale > div:nth-child(1) { 2199 | -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); 2200 | animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); } 2201 | .line-scale > div:nth-child(2) { 2202 | -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); 2203 | animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); } 2204 | .line-scale > div:nth-child(3) { 2205 | -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); 2206 | animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); } 2207 | .line-scale > div:nth-child(4) { 2208 | -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); 2209 | animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); } 2210 | .line-scale > div:nth-child(5) { 2211 | -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); 2212 | animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); } 2213 | .line-scale > div { 2214 | background-color: #fff; 2215 | width: 4px; 2216 | height: 35px; 2217 | border-radius: 2px; 2218 | margin: 2px; 2219 | -webkit-animation-fill-mode: both; 2220 | animation-fill-mode: both; 2221 | display: inline-block; } 2222 | 2223 | @-webkit-keyframes line-scale-party { 2224 | 0% { 2225 | -webkit-transform: scale(1); 2226 | transform: scale(1); } 2227 | 2228 | 50% { 2229 | -webkit-transform: scale(0.5); 2230 | transform: scale(0.5); } 2231 | 2232 | 100% { 2233 | -webkit-transform: scale(1); 2234 | transform: scale(1); } } 2235 | 2236 | @keyframes line-scale-party { 2237 | 0% { 2238 | -webkit-transform: scale(1); 2239 | transform: scale(1); } 2240 | 2241 | 50% { 2242 | -webkit-transform: scale(0.5); 2243 | transform: scale(0.5); } 2244 | 2245 | 100% { 2246 | -webkit-transform: scale(1); 2247 | transform: scale(1); } } 2248 | 2249 | .line-scale-party > div:nth-child(1) { 2250 | -webkit-animation-delay: 0.77s; 2251 | animation-delay: 0.77s; 2252 | -webkit-animation-duration: 1.26s; 2253 | animation-duration: 1.26s; } 2254 | .line-scale-party > div:nth-child(2) { 2255 | -webkit-animation-delay: 0.29s; 2256 | animation-delay: 0.29s; 2257 | -webkit-animation-duration: 0.43s; 2258 | animation-duration: 0.43s; } 2259 | .line-scale-party > div:nth-child(3) { 2260 | -webkit-animation-delay: 0.28s; 2261 | animation-delay: 0.28s; 2262 | -webkit-animation-duration: 1.01s; 2263 | animation-duration: 1.01s; } 2264 | .line-scale-party > div:nth-child(4) { 2265 | -webkit-animation-delay: 0.74s; 2266 | animation-delay: 0.74s; 2267 | -webkit-animation-duration: 0.73s; 2268 | animation-duration: 0.73s; } 2269 | .line-scale-party > div { 2270 | background-color: #fff; 2271 | width: 4px; 2272 | height: 35px; 2273 | border-radius: 2px; 2274 | margin: 2px; 2275 | -webkit-animation-fill-mode: both; 2276 | animation-fill-mode: both; 2277 | display: inline-block; 2278 | -webkit-animation-name: line-scale-party; 2279 | animation-name: line-scale-party; 2280 | -webkit-animation-iteration-count: infinite; 2281 | animation-iteration-count: infinite; 2282 | -webkit-animation-delay: 0; 2283 | animation-delay: 0; } 2284 | 2285 | @-webkit-keyframes line-scale-pulse-out { 2286 | 0% { 2287 | -webkit-transform: scaley(1); 2288 | transform: scaley(1); } 2289 | 2290 | 50% { 2291 | -webkit-transform: scaley(0.4); 2292 | transform: scaley(0.4); } 2293 | 2294 | 100% { 2295 | -webkit-transform: scaley(1); 2296 | transform: scaley(1); } } 2297 | 2298 | @keyframes line-scale-pulse-out { 2299 | 0% { 2300 | -webkit-transform: scaley(1); 2301 | transform: scaley(1); } 2302 | 2303 | 50% { 2304 | -webkit-transform: scaley(0.4); 2305 | transform: scaley(0.4); } 2306 | 2307 | 100% { 2308 | -webkit-transform: scaley(1); 2309 | transform: scaley(1); } } 2310 | 2311 | .line-scale-pulse-out > div { 2312 | background-color: #fff; 2313 | width: 4px; 2314 | height: 35px; 2315 | border-radius: 2px; 2316 | margin: 2px; 2317 | -webkit-animation-fill-mode: both; 2318 | animation-fill-mode: both; 2319 | display: inline-block; 2320 | -webkit-animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85); 2321 | animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85); } 2322 | .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) { 2323 | -webkit-animation-delay: 0.2s !important; 2324 | animation-delay: 0.2s !important; } 2325 | .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) { 2326 | -webkit-animation-delay: 0.4s !important; 2327 | animation-delay: 0.4s !important; } 2328 | 2329 | @-webkit-keyframes line-scale-pulse-out-rapid { 2330 | 0% { 2331 | -webkit-transform: scaley(1); 2332 | transform: scaley(1); } 2333 | 2334 | 80% { 2335 | -webkit-transform: scaley(0.3); 2336 | transform: scaley(0.3); } 2337 | 2338 | 90% { 2339 | -webkit-transform: scaley(1); 2340 | transform: scaley(1); } } 2341 | 2342 | @keyframes line-scale-pulse-out-rapid { 2343 | 0% { 2344 | -webkit-transform: scaley(1); 2345 | transform: scaley(1); } 2346 | 2347 | 80% { 2348 | -webkit-transform: scaley(0.3); 2349 | transform: scaley(0.3); } 2350 | 2351 | 90% { 2352 | -webkit-transform: scaley(1); 2353 | transform: scaley(1); } } 2354 | 2355 | .line-scale-pulse-out-rapid > div { 2356 | background-color: #fff; 2357 | width: 4px; 2358 | height: 35px; 2359 | border-radius: 2px; 2360 | margin: 2px; 2361 | -webkit-animation-fill-mode: both; 2362 | animation-fill-mode: both; 2363 | display: inline-block; 2364 | -webkit-animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78); 2365 | animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78); } 2366 | .line-scale-pulse-out-rapid > div:nth-child(2), .line-scale-pulse-out-rapid > div:nth-child(4) { 2367 | -webkit-animation-delay: 0.25s !important; 2368 | animation-delay: 0.25s !important; } 2369 | .line-scale-pulse-out-rapid > div:nth-child(1), .line-scale-pulse-out-rapid > div:nth-child(5) { 2370 | -webkit-animation-delay: 0.5s !important; 2371 | animation-delay: 0.5s !important; } 2372 | 2373 | @-webkit-keyframes line-spin-fade-loader { 2374 | 50% { 2375 | opacity: 0.3; } 2376 | 2377 | 100% { 2378 | opacity: 1; } } 2379 | 2380 | @keyframes line-spin-fade-loader { 2381 | 50% { 2382 | opacity: 0.3; } 2383 | 2384 | 100% { 2385 | opacity: 1; } } 2386 | 2387 | .line-spin-fade-loader { 2388 | position: relative; } 2389 | .line-spin-fade-loader > div:nth-child(1) { 2390 | top: 20px; 2391 | left: 0; 2392 | -webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; 2393 | animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out; } 2394 | .line-spin-fade-loader > div:nth-child(2) { 2395 | top: 13.63636px; 2396 | left: 13.63636px; 2397 | -webkit-transform: rotate(-45deg); 2398 | -ms-transform: rotate(-45deg); 2399 | transform: rotate(-45deg); 2400 | -webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; 2401 | animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out; } 2402 | .line-spin-fade-loader > div:nth-child(3) { 2403 | top: 0; 2404 | left: 20px; 2405 | -webkit-transform: rotate(90deg); 2406 | -ms-transform: rotate(90deg); 2407 | transform: rotate(90deg); 2408 | -webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; 2409 | animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out; } 2410 | .line-spin-fade-loader > div:nth-child(4) { 2411 | top: -13.63636px; 2412 | left: 13.63636px; 2413 | -webkit-transform: rotate(45deg); 2414 | -ms-transform: rotate(45deg); 2415 | transform: rotate(45deg); 2416 | -webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; 2417 | animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out; } 2418 | .line-spin-fade-loader > div:nth-child(5) { 2419 | top: -20px; 2420 | left: 0; 2421 | -webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; 2422 | animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out; } 2423 | .line-spin-fade-loader > div:nth-child(6) { 2424 | top: -13.63636px; 2425 | left: -13.63636px; 2426 | -webkit-transform: rotate(-45deg); 2427 | -ms-transform: rotate(-45deg); 2428 | transform: rotate(-45deg); 2429 | -webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; 2430 | animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out; } 2431 | .line-spin-fade-loader > div:nth-child(7) { 2432 | top: 0; 2433 | left: -20px; 2434 | -webkit-transform: rotate(90deg); 2435 | -ms-transform: rotate(90deg); 2436 | transform: rotate(90deg); 2437 | -webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; 2438 | animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out; } 2439 | .line-spin-fade-loader > div:nth-child(8) { 2440 | top: 13.63636px; 2441 | left: -13.63636px; 2442 | -webkit-transform: rotate(45deg); 2443 | -ms-transform: rotate(45deg); 2444 | transform: rotate(45deg); 2445 | -webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; 2446 | animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out; } 2447 | .line-spin-fade-loader > div { 2448 | background-color: #fff; 2449 | width: 4px; 2450 | height: 35px; 2451 | border-radius: 2px; 2452 | margin: 2px; 2453 | -webkit-animation-fill-mode: both; 2454 | animation-fill-mode: both; 2455 | position: absolute; 2456 | width: 5px; 2457 | height: 15px; } 2458 | 2459 | /** 2460 | * Misc 2461 | */ 2462 | @-webkit-keyframes triangle-jkew-spin { 2463 | 25% { 2464 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); 2465 | transform: perspective(100px) rotateX(180deg) rotateY(0); } 2466 | 2467 | 50% { 2468 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); 2469 | transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 2470 | 2471 | 75% { 2472 | -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); 2473 | transform: perspective(100px) rotateX(0) rotateY(180deg); } 2474 | 2475 | 100% { 2476 | -webkit-transform: perspective(100px) rotateX(0) rotateY(0); 2477 | transform: perspective(100px) rotateX(0) rotateY(0); } } 2478 | @keyframes triangle-jkew-spin { 2479 | 25% { 2480 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); 2481 | transform: perspective(100px) rotateX(180deg) rotateY(0); } 2482 | 2483 | 50% { 2484 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); 2485 | transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 2486 | 2487 | 75% { 2488 | -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); 2489 | transform: perspective(100px) rotateX(0) rotateY(180deg); } 2490 | 2491 | 100% { 2492 | -webkit-transform: perspective(100px) rotateX(0) rotateY(0); 2493 | transform: perspective(100px) rotateX(0) rotateY(0); } } 2494 | 2495 | .triangle-jkew-spin > div { 2496 | -webkit-animation-fill-mode: both; 2497 | animation-fill-mode: both; 2498 | width: 0; 2499 | height: 0; 2500 | border-left: 20px solid transparent; 2501 | border-right: 20px solid transparent; 2502 | border-bottom: 20px solid #fff; 2503 | -webkit-animation: triangle-jkew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; 2504 | animation: triangle-jkew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; } 2505 | 2506 | @-webkit-keyframes square-spin { 2507 | 25% { 2508 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); 2509 | transform: perspective(100px) rotateX(180deg) rotateY(0); } 2510 | 2511 | 50% { 2512 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); 2513 | transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 2514 | 2515 | 75% { 2516 | -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); 2517 | transform: perspective(100px) rotateX(0) rotateY(180deg); } 2518 | 2519 | 100% { 2520 | -webkit-transform: perspective(100px) rotateX(0) rotateY(0); 2521 | transform: perspective(100px) rotateX(0) rotateY(0); } } 2522 | 2523 | @keyframes square-spin { 2524 | 25% { 2525 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0); 2526 | transform: perspective(100px) rotateX(180deg) rotateY(0); } 2527 | 2528 | 50% { 2529 | -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg); 2530 | transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 2531 | 2532 | 75% { 2533 | -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg); 2534 | transform: perspective(100px) rotateX(0) rotateY(180deg); } 2535 | 2536 | 100% { 2537 | -webkit-transform: perspective(100px) rotateX(0) rotateY(0); 2538 | transform: perspective(100px) rotateX(0) rotateY(0); } } 2539 | 2540 | .square-spin > div { 2541 | -webkit-animation-fill-mode: both; 2542 | animation-fill-mode: both; 2543 | width: 50px; 2544 | height: 50px; 2545 | background: #fff; 2546 | border: 1px solid red; 2547 | -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; 2548 | animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite; } 2549 | 2550 | @-webkit-keyframes rotate_pacman_half_up { 2551 | 0% { 2552 | -webkit-transform: rotate(270deg); 2553 | transform: rotate(270deg); } 2554 | 2555 | 50% { 2556 | -webkit-transform: rotate(360deg); 2557 | transform: rotate(360deg); } 2558 | 2559 | 100% { 2560 | -webkit-transform: rotate(270deg); 2561 | transform: rotate(270deg); } } 2562 | 2563 | @keyframes rotate_pacman_half_up { 2564 | 0% { 2565 | -webkit-transform: rotate(270deg); 2566 | transform: rotate(270deg); } 2567 | 2568 | 50% { 2569 | -webkit-transform: rotate(360deg); 2570 | transform: rotate(360deg); } 2571 | 2572 | 100% { 2573 | -webkit-transform: rotate(270deg); 2574 | transform: rotate(270deg); } } 2575 | 2576 | @-webkit-keyframes rotate_pacman_half_down { 2577 | 0% { 2578 | -webkit-transform: rotate(90deg); 2579 | transform: rotate(90deg); } 2580 | 2581 | 50% { 2582 | -webkit-transform: rotate(0deg); 2583 | transform: rotate(0deg); } 2584 | 2585 | 100% { 2586 | -webkit-transform: rotate(90deg); 2587 | transform: rotate(90deg); } } 2588 | 2589 | @keyframes rotate_pacman_half_down { 2590 | 0% { 2591 | -webkit-transform: rotate(90deg); 2592 | transform: rotate(90deg); } 2593 | 2594 | 50% { 2595 | -webkit-transform: rotate(0deg); 2596 | transform: rotate(0deg); } 2597 | 2598 | 100% { 2599 | -webkit-transform: rotate(90deg); 2600 | transform: rotate(90deg); } } 2601 | 2602 | @-webkit-keyframes pacman-balls { 2603 | 75% { 2604 | opacity: 0.7; } 2605 | 2606 | 100% { 2607 | -webkit-transform: translate(-100px, -6.25px); 2608 | transform: translate(-100px, -6.25px); } } 2609 | 2610 | @keyframes pacman-balls { 2611 | 75% { 2612 | opacity: 0.7; } 2613 | 2614 | 100% { 2615 | -webkit-transform: translate(-100px, -6.25px); 2616 | transform: translate(-100px, -6.25px); } } 2617 | 2618 | .pacman { 2619 | position: relative; } 2620 | .pacman > div:nth-child(2) { 2621 | -webkit-animation: pacman-balls 1s 0s infinite linear; 2622 | animation: pacman-balls 1s 0s infinite linear; } 2623 | .pacman > div:nth-child(3) { 2624 | -webkit-animation: pacman-balls 1s 0.33s infinite linear; 2625 | animation: pacman-balls 1s 0.33s infinite linear; } 2626 | .pacman > div:nth-child(4) { 2627 | -webkit-animation: pacman-balls 1s 0.66s infinite linear; 2628 | animation: pacman-balls 1s 0.66s infinite linear; } 2629 | .pacman > div:nth-child(5) { 2630 | -webkit-animation: pacman-balls 1s 0.99s infinite linear; 2631 | animation: pacman-balls 1s 0.99s infinite linear; } 2632 | .pacman > div:first-of-type { 2633 | width: 0px; 2634 | height: 0px; 2635 | border-right: 25px solid transparent; 2636 | border-top: 25px solid #fff; 2637 | border-left: 25px solid #fff; 2638 | border-bottom: 25px solid #fff; 2639 | border-radius: 25px; 2640 | -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite; 2641 | animation: rotate_pacman_half_up 0.5s 0s infinite; } 2642 | .pacman > div:nth-child(2) { 2643 | width: 0px; 2644 | height: 0px; 2645 | border-right: 25px solid transparent; 2646 | border-top: 25px solid #fff; 2647 | border-left: 25px solid #fff; 2648 | border-bottom: 25px solid #fff; 2649 | border-radius: 25px; 2650 | -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite; 2651 | animation: rotate_pacman_half_down 0.5s 0s infinite; 2652 | margin-top: -50px; } 2653 | .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) { 2654 | background-color: #fff; 2655 | width: 15px; 2656 | height: 15px; 2657 | border-radius: 100%; 2658 | margin: 2px; 2659 | width: 10px; 2660 | height: 10px; 2661 | position: absolute; 2662 | -webkit-transform: translate(0, -6.25px); 2663 | -ms-transform: translate(0, -6.25px); 2664 | transform: translate(0, -6.25px); 2665 | top: 25px; 2666 | left: 100px; } 2667 | 2668 | @-webkit-keyframes cube-transition { 2669 | 25% { 2670 | -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg); 2671 | transform: translateX(50px) scale(0.5) rotate(-90deg); } 2672 | 2673 | 50% { 2674 | -webkit-transform: translate(50px, 50px) rotate(-180deg); 2675 | transform: translate(50px, 50px) rotate(-180deg); } 2676 | 2677 | 75% { 2678 | -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg); 2679 | transform: translateY(50px) scale(0.5) rotate(-270deg); } 2680 | 2681 | 100% { 2682 | -webkit-transform: rotate(-360deg); 2683 | transform: rotate(-360deg); } } 2684 | 2685 | @keyframes cube-transition { 2686 | 25% { 2687 | -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg); 2688 | transform: translateX(50px) scale(0.5) rotate(-90deg); } 2689 | 2690 | 50% { 2691 | -webkit-transform: translate(50px, 50px) rotate(-180deg); 2692 | transform: translate(50px, 50px) rotate(-180deg); } 2693 | 2694 | 75% { 2695 | -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg); 2696 | transform: translateY(50px) scale(0.5) rotate(-270deg); } 2697 | 2698 | 100% { 2699 | -webkit-transform: rotate(-360deg); 2700 | transform: rotate(-360deg); } } 2701 | 2702 | .cube-transition { 2703 | position: relative; 2704 | -webkit-transform: translate(-25px, -25px); 2705 | -ms-transform: translate(-25px, -25px); 2706 | transform: translate(-25px, -25px); } 2707 | .cube-transition > div { 2708 | -webkit-animation-fill-mode: both; 2709 | animation-fill-mode: both; 2710 | width: 10px; 2711 | height: 10px; 2712 | position: absolute; 2713 | top: 0; 2714 | left: 0; 2715 | background-color: #fff; 2716 | -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out; 2717 | animation: cube-transition 1.6s 0s infinite ease-in-out; } 2718 | .cube-transition > div:last-child { 2719 | -webkit-animation-delay: -0.8s; 2720 | animation-delay: -0.8s; } 2721 | 2722 | @-webkit-keyframes spin-rotate { 2723 | 0% { 2724 | -webkit-transform: rotate(0deg); 2725 | transform: rotate(0deg); } 2726 | 2727 | 50% { 2728 | -webkit-transform: rotate(180deg); 2729 | transform: rotate(180deg); } 2730 | 2731 | 100% { 2732 | -webkit-transform: rotate(360deg); 2733 | transform: rotate(360deg); } } 2734 | 2735 | @keyframes spin-rotate { 2736 | 0% { 2737 | -webkit-transform: rotate(0deg); 2738 | transform: rotate(0deg); } 2739 | 2740 | 50% { 2741 | -webkit-transform: rotate(180deg); 2742 | transform: rotate(180deg); } 2743 | 2744 | 100% { 2745 | -webkit-transform: rotate(360deg); 2746 | transform: rotate(360deg); } } 2747 | 2748 | .semi-circle-spin { 2749 | position: relative; 2750 | width: 35px; 2751 | height: 35px; 2752 | overflow: hidden; } 2753 | .semi-circle-spin > div { 2754 | position: absolute; 2755 | border-width: 0px; 2756 | border-radius: 100%; 2757 | -webkit-animation: spin-rotate 0.6s 0s infinite linear; 2758 | animation: spin-rotate 0.6s 0s infinite linear; 2759 | background-image: -webkit-linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%); 2760 | background-image: linear-gradient(transparent 0%, transparent 70%, #fff 30%, #fff 100%); 2761 | width: 100%; 2762 | height: 100%; } 2763 | --------------------------------------------------------------------------------