#e8e8e8
1/* The loader */ 2.loader { 3 position: absolute; 4 top: 50%; 5 left: 50%; 6 overflow: hidden; 7 width: 200px; 8 height: 200px; 9 margin-top: -100px; 10 margin-left: -100px; 11 perspective: 1000px; 12 transform-style: perserve-3d; 13} 14 15/* The dots */ 16.dots { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 perspective: 200px; 23 transform-style: perserve-3d; 24 animation: dots 10000ms linear infinite; 25} 26 27.dots:nth-child(1) { 28 animation-name: dots; 29} 30 31.dots:nth-child(2) { 32 animation-name: dots2; 33} 34 35.dots:nth-child(3) { 36 animation-name: dots3; 37} 38 39.dots:nth-child(4) { 40 animation-name: dots4; 41} 42 43.dots:nth-child(5) { 44 animation-name: dots5; 45} 46 47.dots:nth-child(6) { 48 animation-name: dots6; 49} 50 51@keyframes dots { 52 0% { 53 transform: rotateX(30deg) rotateZ(0deg) translateZ(-50px); 54 } 55 56 50% { 57 transform: rotateX(60deg) rotateZ(5760deg) translateZ(-100px); 58 } 59 60 100% { 61 transform: rotateX(30deg) rotateZ(11520deg) translateZ(-50px); 62 } 63} 64 65@keyframes dots2 { 66 0% { 67 transform: rotateX(30deg) rotateZ(0deg) translateZ(-36px); 68 } 69 70 50% { 71 transform: rotateX(60deg) rotateZ(2880deg) translateZ(-72px); 72 } 73 74 100% { 75 transform: rotateX(30deg) rotateZ(5760deg) translateZ(-36px); 76 } 77} 78 79@keyframes dots3 { 80 0% { 81 transform: rotateX(30deg) rotateZ(0deg) translateZ(-24px); 82 } 83 84 50% { 85 transform: rotateX(60deg) rotateZ(1440deg) translateZ(-48px); 86 } 87 88 100% { 89 transform: rotateX(30deg) rotateZ(2880deg) translateZ(-24px); 90 } 91} 92 93@keyframes dots4 { 94 0% { 95 transform: rotateX(30deg) rotateZ(0deg) translateZ(-14px); 96 } 97 98 50% { 99 transform: rotateX(60deg) rotateZ(720deg) translateZ(-28px); 100 } 101 102 100% { 103 transform: rotateX(30deg) rotateZ(1440deg) translateZ(-14px); 104 } 105} 106 107@keyframes dots5 { 108 0% { 109 transform: rotateX(30deg) rotateZ(0deg) translateZ(-6px); 110 } 111 112 50% { 113 transform: rotateX(60deg) rotateZ(360deg) translateZ(-12px); 114 } 115 116 100% { 117 transform: rotateX(30deg) rotateZ(720deg) translateZ(-6px); 118 } 119} 120 121@keyframes dots6 { 122 0% { 123 transform: rotateX(30deg) rotateZ(0deg) translateZ(0px); 124 } 125 126 50% { 127 transform: rotateX(60deg) rotateZ(180deg) translateZ(-3px); 128 } 129 130 100% { 131 transform: rotateX(30deg) rotateZ(360deg) translateZ(0px); 132 } 133} 134 135/* The dot */ 136.dot { 137 position: absolute; 138 top: 50%; 139 left: 50%; 140 width: 10px; 141 height: 10px; 142 margin-left: -5px; 143 margin-top: -5px; 144 border-radius: 100px; 145 background-color: #1e3f57; 146 transform-style: perserve-3d; 147 transform: rotateZ(0) translateY(0); 148} 149 150.dots:nth-child(6) .dot { 151 background-color: #1e3f57; 152} 153 154.dots:nth-child(1) .dot:nth-child(1) { 155 transform: rotateZ(0) translateY(-10px); 156} 157 158.dots:nth-child(1) .dot:nth-child(2) { 159 transform: rotateZ(90deg) translateY(-10px) translateZ(-140px); 160} 161 162.dots:nth-child(1) .dot:nth-child(3) { 163 transform: rotateZ(180deg) translateY(-10px); 164} 165 166.dots:nth-child(1) .dot:nth-child(4) { 167 transform: rotateZ(270deg) translateY(-10px) translateZ(-140px); 168} 169 170.dots:nth-child(5) .dot { 171 background-color: #295068; 172} 173 174.dots:nth-child(2) .dot:nth-child(1) { 175 transform: rotateZ(0) translateY(-22px); 176} 177 178.dots:nth-child(2) .dot:nth-child(2) { 179 transform: rotateZ(45deg) translateY(-22px) translateZ(-120px); 180} 181 182.dots:nth-child(2) .dot:nth-child(3) { 183 transform: rotateZ(90deg) translateY(-22px); 184} 185 186.dots:nth-child(2) .dot:nth-child(4) { 187 transform: rotateZ(135deg) translateY(-22px) translateZ(-120px); 188} 189 190.dots:nth-child(2) .dot:nth-child(5) { 191 transform: rotateZ(180deg) translateY(-22px); 192} 193 194.dots:nth-child(2) .dot:nth-child(6) { 195 transform: rotateZ(225deg) translateY(-22px) translateZ(-120px); 196} 197 198.dots:nth-child(2) .dot:nth-child(7) { 199 transform: rotateZ(270deg) translateY(-22px); 200} 201 202.dots:nth-child(2) .dot:nth-child(8) { 203 transform: rotateZ(315deg) translateY(-22px) translateZ(-120px); 204} 205 206.dots:nth-child(4) .dot { 207 background-color: #3b6a83; 208} 209 210.dots:nth-child(3) .dot:nth-child(1) { 211 transform: rotateZ(0) translateY(-34px); 212} 213 214.dots:nth-child(3) .dot:nth-child(2) { 215 transform: rotateZ(30deg) translateY(-34px) translateZ(-100px); 216} 217 218.dots:nth-child(3) .dot:nth-child(3) { 219 transform: rotateZ(60deg) translateY(-34px); 220} 221 222.dots:nth-child(3) .dot:nth-child(4) { 223 transform: rotateZ(90deg) translateY(-34px) translateZ(-100px); 224} 225 226.dots:nth-child(3) .dot:nth-child(5) { 227 transform: rotateZ(120deg) translateY(-34px); 228} 229 230.dots:nth-child(3) .dot:nth-child(6) { 231 transform: rotateZ(150deg) translateY(-34px) translateZ(-100px); 232} 233 234.dots:nth-child(3) .dot:nth-child(7) { 235 transform: rotateZ(180deg) translateY(-34px); 236} 237 238.dots:nth-child(3) .dot:nth-child(8) { 239 transform: rotateZ(210deg) translateY(-34px) translateZ(-100px); 240} 241 242.dots:nth-child(3) .dot:nth-child(9) { 243 transform: rotateZ(240deg) translateY(-34px); 244} 245 246.dots:nth-child(3) .dot:nth-child(10) { 247 transform: rotateZ(270deg) translateY(-34px) translateZ(-100px); 248} 249 250.dots:nth-child(3) .dot:nth-child(11) { 251 transform: rotateZ(300deg) translateY(-34px); 252} 253 254.dots:nth-child(3) .dot:nth-child(12) { 255 transform: rotateZ(330deg) translateY(-34px) translateZ(-100px); 256} 257 258.dots:nth-child(3) .dot { 259 background-color: #4d86a0; 260} 261 262.dots:nth-child(4) .dot:nth-child(1) { 263 transform: rotateZ(0) translateY(-46px); 264} 265 266.dots:nth-child(4) .dot:nth-child(2) { 267 transform: rotateZ(20deg) translateY(-46px) translateZ(-80px); 268} 269 270.dots:nth-child(4) .dot:nth-child(3) { 271 transform: rotateZ(40deg) translateY(-46px); 272} 273 274.dots:nth-child(4) .dot:nth-child(4) { 275 transform: rotateZ(60deg) translateY(-46px) translateZ(-80px); 276} 277 278.dots:nth-child(4) .dot:nth-child(5) { 279 transform: rotateZ(80deg) translateY(-46px); 280} 281 282.dots:nth-child(4) .dot:nth-child(6) { 283 transform: rotateZ(100deg) translateY(-46px) translateZ(-80px); 284} 285 286.dots:nth-child(4) .dot:nth-child(7) { 287 transform: rotateZ(120deg) translateY(-46px); 288} 289 290.dots:nth-child(4) .dot:nth-child(8) { 291 transform: rotateZ(140deg) translateY(-46px) translateZ(-80px); 292} 293 294.dots:nth-child(4) .dot:nth-child(9) { 295 transform: rotateZ(160deg) translateY(-46px); 296} 297 298.dots:nth-child(4) .dot:nth-child(10) { 299 transform: rotateZ(180deg) translateY(-46px) translateZ(-80px); 300} 301 302.dots:nth-child(4) .dot:nth-child(11) { 303 transform: rotateZ(200deg) translateY(-46px); 304} 305 306.dots:nth-child(4) .dot:nth-child(12) { 307 transform: rotateZ(220deg) translateY(-46px) translateZ(-80px); 308} 309 310.dots:nth-child(4) .dot:nth-child(13) { 311 transform: rotateZ(240deg) translateY(-46px); 312} 313 314.dots:nth-child(4) .dot:nth-child(14) { 315 transform: rotateZ(260deg) translateY(-46px) translateZ(-80px); 316} 317 318.dots:nth-child(4) .dot:nth-child(15) { 319 transform: rotateZ(280deg) translateY(-46px); 320} 321 322.dots:nth-child(4) .dot:nth-child(16) { 323 transform: rotateZ(300deg) translateY(-46px) translateZ(-80px); 324} 325 326.dots:nth-child(4) .dot:nth-child(17) { 327 transform: rotateZ(320deg) translateY(-46px); 328} 329 330.dots:nth-child(4) .dot:nth-child(18) { 331 transform: rotateZ(340deg) translateY(-46px) translateZ(-80px); 332} 333 334.dots:nth-child(2) .dot { 335 background-color: #5ea0ba; 336} 337 338.dots:nth-child(5) .dot:nth-child(1) { 339 transform: rotateZ(0) translateY(-58px); 340} 341 342.dots:nth-child(5) .dot:nth-child(2) { 343 transform: rotateZ(15deg) translateY(-58px) translateZ(-40px); 344} 345 346.dots:nth-child(5) .dot:nth-child(3) { 347 transform: rotateZ(30deg) translateY(-58px); 348} 349 350.dots:nth-child(5) .dot:nth-child(4) { 351 transform: rotateZ(45deg) translateY(-58px) translateZ(-40px); 352} 353 354.dots:nth-child(5) .dot:nth-child(5) { 355 transform: rotateZ(60deg) translateY(-58px); 356} 357 358.dots:nth-child(5) .dot:nth-child(6) { 359 transform: rotateZ(75deg) translateY(-58px) translateZ(-40px); 360} 361 362.dots:nth-child(5) .dot:nth-child(7) { 363 transform: rotateZ(90deg) translateY(-58px); 364} 365 366.dots:nth-child(5) .dot:nth-child(8) { 367 transform: rotateZ(105deg) translateY(-58px) translateZ(-40px); 368} 369 370.dots:nth-child(5) .dot:nth-child(9) { 371 transform: rotateZ(120deg) translateY(-58px); 372} 373 374.dots:nth-child(5) .dot:nth-child(10) { 375 transform: rotateZ(135deg) translateY(-58px) translateZ(-40px); 376} 377 378.dots:nth-child(5) .dot:nth-child(11) { 379 transform: rotateZ(150deg) translateY(-58px); 380} 381 382.dots:nth-child(5) .dot:nth-child(12) { 383 transform: rotateZ(165deg) translateY(-58px) translateZ(-40px); 384} 385 386.dots:nth-child(5) .dot:nth-child(13) { 387 transform: rotateZ(180deg) translateY(-58px); 388} 389 390.dots:nth-child(5) .dot:nth-child(14) { 391 transform: rotateZ(195deg) translateY(-58px) translateZ(-40px); 392} 393 394.dots:nth-child(5) .dot:nth-child(15) { 395 transform: rotateZ(210deg) translateY(-58px); 396} 397 398.dots:nth-child(5) .dot:nth-child(16) { 399 transform: rotateZ(225deg) translateY(-58px) translateZ(-40px); 400} 401 402.dots:nth-child(5) .dot:nth-child(17) { 403 transform: rotateZ(240deg) translateY(-58px); 404} 405 406.dots:nth-child(5) .dot:nth-child(18) { 407 transform: rotateZ(255deg) translateY(-58px) translateZ(-40px); 408} 409 410.dots:nth-child(5) .dot:nth-child(19) { 411 transform: rotateZ(270deg) translateY(-58px); 412} 413 414.dots:nth-child(5) .dot:nth-child(20) { 415 transform: rotateZ(285deg) translateY(-58px) translateZ(-40px); 416} 417 418.dots:nth-child(5) .dot:nth-child(21) { 419 transform: rotateZ(300deg) translateY(-58px); 420} 421 422.dots:nth-child(5) .dot:nth-child(22) { 423 transform: rotateZ(315deg) translateY(-58px) translateZ(-40px); 424} 425 426.dots:nth-child(5) .dot:nth-child(23) { 427 transform: rotateZ(330deg) translateY(-58px); 428} 429 430.dots:nth-child(5) .dot:nth-child(24) { 431 transform: rotateZ(345deg) translateY(-58px) translateZ(-40px); 432} 433 434.dots:nth-child(1) .dot { 435 background-color: #6bb1cd; 436} 437 438.dots:nth-child(6) .dot:nth-child(1) { 439 transform: rotateZ(0deg) translateY(-70px); 440} 441 442.dots:nth-child(6) .dot:nth-child(2) { 443 transform: rotateZ(10deg) translateY(-70px) translateZ(-20px); 444} 445 446.dots:nth-child(6) .dot:nth-child(3) { 447 transform: rotateZ(20deg) translateY(-70px); 448} 449 450.dots:nth-child(6) .dot:nth-child(4) { 451 transform: rotateZ(30deg) translateY(-70px) translateZ(-20px); 452} 453 454.dots:nth-child(6) .dot:nth-child(5) { 455 transform: rotateZ(40deg) translateY(-70px); 456} 457 458.dots:nth-child(6) .dot:nth-child(6) { 459 transform: rotateZ(50deg) translateY(-70px) translateZ(-20px); 460} 461 462.dots:nth-child(6) .dot:nth-child(7) { 463 transform: rotateZ(60deg) translateY(-70px); 464} 465 466.dots:nth-child(6) .dot:nth-child(8) { 467 transform: rotateZ(70deg) translateY(-70px) translateZ(-20px); 468} 469 470.dots:nth-child(6) .dot:nth-child(9) { 471 transform: rotateZ(80deg) translateY(-70px); 472} 473 474.dots:nth-child(6) .dot:nth-child(10) { 475 transform: rotateZ(90deg) translateY(-70px) translateZ(-20px); 476} 477 478.dots:nth-child(6) .dot:nth-child(11) { 479 transform: rotateZ(100deg) translateY(-70px); 480} 481 482.dots:nth-child(6) .dot:nth-child(12) { 483 transform: rotateZ(110deg) translateY(-70px) translateZ(-20px); 484} 485 486.dots:nth-child(6) .dot:nth-child(13) { 487 transform: rotateZ(120deg) translateY(-70px); 488} 489 490.dots:nth-child(6) .dot:nth-child(14) { 491 transform: rotateZ(130deg) translateY(-70px) translateZ(-20px); 492} 493 494.dots:nth-child(6) .dot:nth-child(15) { 495 transform: rotateZ(140deg) translateY(-70px); 496} 497 498.dots:nth-child(6) .dot:nth-child(16) { 499 transform: rotateZ(150deg) translateY(-70px) translateZ(-20px); 500} 501 502.dots:nth-child(6) .dot:nth-child(17) { 503 transform: rotateZ(160deg) translateY(-70px); 504} 505 506.dots:nth-child(6) .dot:nth-child(18) { 507 transform: rotateZ(170deg) translateY(-70px) translateZ(-20px); 508} 509 510.dots:nth-child(6) .dot:nth-child(19) { 511 transform: rotateZ(180deg) translateY(-70px); 512} 513 514.dots:nth-child(6) .dot:nth-child(20) { 515 transform: rotateZ(190deg) translateY(-70px) translateZ(-20px); 516} 517 518.dots:nth-child(6) .dot:nth-child(21) { 519 transform: rotateZ(200deg) translateY(-70px); 520} 521 522.dots:nth-child(6) .dot:nth-child(22) { 523 transform: rotateZ(210deg) translateY(-70px) translateZ(-20px); 524} 525 526.dots:nth-child(6) .dot:nth-child(23) { 527 transform: rotateZ(220deg) translateY(-70px); 528} 529 530.dots:nth-child(6) .dot:nth-child(24) { 531 transform: rotateZ(230deg) translateY(-70px) translateZ(-20px); 532} 533 534.dots:nth-child(6) .dot:nth-child(25) { 535 transform: rotateZ(240deg) translateY(-70px); 536} 537 538.dots:nth-child(6) .dot:nth-child(26) { 539 transform: rotateZ(250deg) translateY(-70px) translateZ(-20px); 540} 541 542.dots:nth-child(6) .dot:nth-child(27) { 543 transform: rotateZ(260deg) translateY(-70px); 544} 545 546.dots:nth-child(6) .dot:nth-child(28) { 547 transform: rotateZ(270deg) translateY(-70px) translateZ(-20px); 548} 549 550.dots:nth-child(6) .dot:nth-child(29) { 551 transform: rotateZ(280deg) translateY(-70px); 552} 553 554.dots:nth-child(6) .dot:nth-child(30) { 555 transform: rotateZ(290deg) translateY(-70px) translateZ(-20px); 556} 557 558.dots:nth-child(6) .dot:nth-child(31) { 559 transform: rotateZ(300deg) translateY(-70px); 560} 561 562.dots:nth-child(6) .dot:nth-child(32) { 563 transform: rotateZ(310deg) translateY(-70px) translateZ(-20px); 564} 565 566.dots:nth-child(6) .dot:nth-child(33) { 567 transform: rotateZ(320deg) translateY(-70px); 568} 569 570.dots:nth-child(6) .dot:nth-child(34) { 571 transform: rotateZ(330deg) translateY(-70px) translateZ(-20px); 572} 573 574.dots:nth-child(6) .dot:nth-child(35) { 575 transform: rotateZ(340deg) translateY(-70px); 576} 577 578.dots:nth-child(6) .dot:nth-child(36) { 579 transform: rotateZ(350deg) translateY(-70px) translateZ(-20px); 580}
911 views
911 views
Comments
MIT License