329 views
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}
MIT License