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