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-type: preserve-3d; 12} 13 14 15/* The cube */ 16.cube { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 50%; 21 height: 50%; 22 transform-style: preserve-3d; 23 transform: translateZ(-50px); 24 animation: cube 4s cubic-bezier(.18,.56,.64,1) infinite; 25} 26 27@keyframes cube { 28 0% { 29 top: 0%; 30 left: 0%; 31 transform: translateZ(-50px); 32 } 33 34 25% { 35 top: 50%; 36 left: 50%; 37 transform: translateZ(-50px) rotateX(-90deg) rotateZ(90deg); 38 } 39 40 50% { 41 top: 0%; 42 left: 50%; 43 transform: translateZ(-50px) rotateX(0deg) rotateZ(180deg); 44 } 45 46 75% { 47 top: 50%; 48 left: 0%; 49 transform: translateZ(-50px) rotateX(-90deg) rotateZ(-90deg); 50 } 51} 52 53 54/* The side */ 55.side { 56 position: absolute; 57 top: 0; 58 left: 0; 59 width: 100%; 60 height: 100%; 61 transform-style: preserve-3d; 62 backface-visibility: hidden; 63} 64 65/* back */ 66.side:nth-child(1) { 67 transform: rotateX(-180deg) translateZ(50px); 68 background-color: #1e3f57; 69} 70 71/* left side */ 72.side:nth-child(2) { 73 transform: rotateY(-90deg) translateZ(50px); 74 background-color: #6bb2cd; 75} 76 77/* right side */ 78.side:nth-child(3) { 79 transform: rotateY(90deg) translateZ(50px); 80 background-color: #6bb2cd; 81} 82 83/* top side */ 84.side:nth-child(4) { 85 transform: rotateX(90deg) translateZ(50px); 86 background-color: #3c617d; 87} 88 89/* bottom side */ 90.side:nth-child(5) { 91 transform: rotateX(-90deg) translateZ(50px); 92 background-color: #3c617d; 93} 94 95/* top */ 96.side:nth-child(6) { 97 transform: translateZ(50px); 98 background-color: #1e3f57; 99} 100
694 views
694 views
MIT License