Loader by jeremyssocial
#e8e8e8
1.cube-loader { 2 position: relative; 3 width: 40px; 4 height: 40px; 5 margin: auto; 6} 7 8.cube { 9 position: absolute; 10 width: 50%; 11 height: 50%; 12 background-color: #333; 13 border: 2px solid #fff; 14 animation: foldCube 2.4s infinite linear; 15} 16 17/* Individual cube positioning */ 18.cube1 { 19 top: 0; 20 left: 0; 21 transform-origin: 100% 100%; 22} 23.cube2 { 24 top: 0; 25 right: 0; 26 transform-origin: 0 100%; 27} 28.cube3 { 29 bottom: 0; 30 right: 0; 31 transform-origin: 0 0; 32} 33.cube4 { 34 bottom: 0; 35 left: 0; 36 transform-origin: 100% 0; 37} 38 39/* Keyframes for the folding animation */ 40@keyframes foldCube { 41 0%, 42 10% { 43 transform: perspective(140px) rotateX(-180deg); 44 opacity: 0; 45 } 46 25%, 47 75% { 48 transform: perspective(140px) rotateX(0deg); 49 opacity: 1; 50 } 51 90%, 52 100% { 53 transform: perspective(140px) rotateY(180deg); 54 opacity: 0; 55 } 56} 57 58/* Animation delay for each cube */ 59.cube1 { 60 animation-delay: 0.3s; 61} 62.cube2 { 63 animation-delay: 0.6s; 64} 65.cube3 { 66 animation-delay: 0.9s; 67} 68.cube4 { 69 animation-delay: 1.2s; 70} 71
443 views
443 views
MIT License