Loader by Pradeepsaranbishnoi
#e8e8e8
1/* The loader container */ 2.loader { 3 position: absolute; 4 top: 50%; 5 left: 50%; 6 width: 200px; 7 height: 200px; 8 margin-top: -100px; 9 margin-left: -100px; 10 perspective: 1000px; 11 transform-style: preserve-3d; 12} 13 14 15/* The cubes */ 16.cubes { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 transform-style: preserve-3d; 23 transform: rotateY(45deg) rotateZ(45deg); 24} 25 26 27/* The cube */ 28.cube { 29 position: absolute; 30 top: 0; 31 left: 0; 32 width: 50%; 33 height: 50%; 34 transform-origin: 50% 50%; 35 transform-style: preserve-3d; 36 transform: translateZ(-50px); 37 animation: cube 2500ms cubic-bezier(.66,.14,.56,.75) infinite; 38} 39 40.cube:nth-child(2) { 41 top: 0; 42 left: 50%; 43 animation-delay: 50ms; 44} 45 46.cube:nth-child(3) { 47 top: 50%; 48 left: 0; 49 animation-delay: 100ms; 50} 51 52.cube:nth-child(4) { 53 top: 50%; 54 left: 50%; 55 animation-delay: 150ms; 56} 57 58@keyframes cube { 59 0%, 75%, 100% { 60 transform: translate3d(0px, 0px, 50px) rotateY(0deg) scale3d(0.9, 0.9, 0.1); 61 } 62 63 25%, 50% { 64 transform: translate3d(0px, 0px, -50px) rotateY(180deg) scale3d(0.9, 0.9, 0.1); 65 } 66} 67 68 69 70 71 72/* The side */ 73.side { 74 position: absolute; 75 top: 0; 76 left: 0; 77 width: 100%; 78 height: 100%; 79 transform-style: preserve-3d; 80 backface-visibility: hidden; 81} 82 83/* back */ 84.side:nth-child(1) { 85 transform: rotateX(-180deg) translateZ(50px); 86 background-color: #1e3f57; 87} 88 89/* left side */ 90.side:nth-child(2) { 91 transform: rotateY(-90deg) translateZ(50px); 92 background-color: #6bb2cd; 93} 94 95/* right side */ 96.side:nth-child(3) { 97 transform: rotateY(90deg) translateZ(50px); 98 background-color: #6bb2cd; 99} 100 101/* top side */ 102.side:nth-child(4) { 103 transform: rotateX(90deg) translateZ(50px); 104 background-color: #3c617d; 105} 106 107/* bottom side */ 108.side:nth-child(5) { 109 transform: rotateX(-90deg) translateZ(50px); 110 background-color: #3c617d; 111} 112 113/* top */ 114.side:nth-child(6) { 115 transform: translateZ(50px); 116 background-color: #1e3f57; 117} 118
740 views
740 views
MIT License