#e8e8e8
1/* 3D tower loader made by: csozi | Website: www.csozi.hu*/ 2 3.loader { 4 scale: 3; 5 height: 50px; 6 width: 40px; 7} 8 9.box { 10 position: relative; 11 opacity: 0; 12 left: 10px; 13} 14 15.side-left { 16 position: absolute; 17 background-color: #286cb5; 18 width: 19px; 19 height: 5px; 20 transform: skew(0deg, -25deg); 21 top: 14px; 22 left: 10px; 23} 24 25.side-right { 26 position: absolute; 27 background-color: #2f85e0; 28 width: 19px; 29 height: 5px; 30 transform: skew(0deg, 25deg); 31 top: 14px; 32 left: -9px; 33} 34 35.side-top { 36 position: absolute; 37 background-color: #5fa8f5; 38 width: 20px; 39 height: 20px; 40 rotate: 45deg; 41 transform: skew(-20deg, -20deg); 42} 43 44.box-1 { 45 animation: from-left 4s infinite; 46} 47 48.box-2 { 49 animation: from-right 4s infinite; 50 animation-delay: 1s; 51} 52 53.box-3 { 54 animation: from-left 4s infinite; 55 animation-delay: 2s; 56} 57 58.box-4 { 59 animation: from-right 4s infinite; 60 animation-delay: 3s; 61} 62 63@keyframes from-left { 64 0% { 65 z-index: 20; 66 opacity: 0; 67 translate: -20px -6px; 68 } 69 70 20% { 71 z-index: 10; 72 opacity: 1; 73 translate: 0px 0px; 74 } 75 76 40% { 77 z-index: 9; 78 translate: 0px 4px; 79 } 80 81 60% { 82 z-index: 8; 83 translate: 0px 8px; 84 } 85 86 80% { 87 z-index: 7; 88 opacity: 1; 89 translate: 0px 12px; 90 } 91 92 100% { 93 z-index: 5; 94 translate: 0px 30px; 95 opacity: 0; 96 } 97} 98 99@keyframes from-right { 100 0% { 101 z-index: 20; 102 opacity: 0; 103 translate: 20px -6px; 104 } 105 106 20% { 107 z-index: 10; 108 opacity: 1; 109 translate: 0px 0px; 110 } 111 112 40% { 113 z-index: 9; 114 translate: 0px 4px; 115 } 116 117 60% { 118 z-index: 8; 119 translate: 0px 8px; 120 } 121 122 80% { 123 z-index: 7; 124 opacity: 1; 125 translate: 0px 12px; 126 } 127 128 100% { 129 z-index: 5; 130 translate: 0px 30px; 131 opacity: 0; 132 } 133}
Comments
MIT License