Loader by Nawsome
#e8e8e8
1.boxes { 2 --size: 32px; 3 --duration: 800ms; 4 height: calc(var(--size) * 2); 5 width: calc(var(--size) * 3); 6 position: relative; 7 transform-style: preserve-3d; 8 transform-origin: 50% 50%; 9 margin-top: calc(var(--size) * 1.5 * -1); 10 transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); 11} 12 13.boxes .box { 14 width: var(--size); 15 height: var(--size); 16 top: 0; 17 left: 0; 18 position: absolute; 19 transform-style: preserve-3d; 20} 21 22.boxes .box:nth-child(1) { 23 transform: translate(100%, 0); 24 -webkit-animation: box1 var(--duration) linear infinite; 25 animation: box1 var(--duration) linear infinite; 26} 27 28.boxes .box:nth-child(2) { 29 transform: translate(0, 100%); 30 -webkit-animation: box2 var(--duration) linear infinite; 31 animation: box2 var(--duration) linear infinite; 32} 33 34.boxes .box:nth-child(3) { 35 transform: translate(100%, 100%); 36 -webkit-animation: box3 var(--duration) linear infinite; 37 animation: box3 var(--duration) linear infinite; 38} 39 40.boxes .box:nth-child(4) { 41 transform: translate(200%, 0); 42 -webkit-animation: box4 var(--duration) linear infinite; 43 animation: box4 var(--duration) linear infinite; 44} 45 46.boxes .box > div { 47 --background: #5C8DF6; 48 --top: auto; 49 --right: auto; 50 --bottom: auto; 51 --left: auto; 52 --translateZ: calc(var(--size) / 2); 53 --rotateY: 0deg; 54 --rotateX: 0deg; 55 position: absolute; 56 width: 100%; 57 height: 100%; 58 background: var(--background); 59 top: var(--top); 60 right: var(--right); 61 bottom: var(--bottom); 62 left: var(--left); 63 transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ)); 64} 65 66.boxes .box > div:nth-child(1) { 67 --top: 0; 68 --left: 0; 69} 70 71.boxes .box > div:nth-child(2) { 72 --background: #145af2; 73 --right: 0; 74 --rotateY: 90deg; 75} 76 77.boxes .box > div:nth-child(3) { 78 --background: #447cf5; 79 --rotateX: -90deg; 80} 81 82.boxes .box > div:nth-child(4) { 83 --background: #DBE3F4; 84 --top: 0; 85 --left: 0; 86 --translateZ: calc(var(--size) * 3 * -1); 87} 88 89@-webkit-keyframes box1 { 90 0%, 50% { 91 transform: translate(100%, 0); 92 } 93 94 100% { 95 transform: translate(200%, 0); 96 } 97} 98 99@keyframes box1 { 100 0%, 50% { 101 transform: translate(100%, 0); 102 } 103 104 100% { 105 transform: translate(200%, 0); 106 } 107} 108 109@-webkit-keyframes box2 { 110 0% { 111 transform: translate(0, 100%); 112 } 113 114 50% { 115 transform: translate(0, 0); 116 } 117 118 100% { 119 transform: translate(100%, 0); 120 } 121} 122 123@keyframes box2 { 124 0% { 125 transform: translate(0, 100%); 126 } 127 128 50% { 129 transform: translate(0, 0); 130 } 131 132 100% { 133 transform: translate(100%, 0); 134 } 135} 136 137@-webkit-keyframes box3 { 138 0%, 50% { 139 transform: translate(100%, 100%); 140 } 141 142 100% { 143 transform: translate(0, 100%); 144 } 145} 146 147@keyframes box3 { 148 0%, 50% { 149 transform: translate(100%, 100%); 150 } 151 152 100% { 153 transform: translate(0, 100%); 154 } 155} 156 157@-webkit-keyframes box4 { 158 0% { 159 transform: translate(200%, 0); 160 } 161 162 50% { 163 transform: translate(200%, 100%); 164 } 165 166 100% { 167 transform: translate(100%, 100%); 168 } 169} 170 171@keyframes box4 { 172 0% { 173 transform: translate(200%, 0); 174 } 175 176 50% { 177 transform: translate(200%, 100%); 178 } 179 180 100% { 181 transform: translate(100%, 100%); 182 } 183}
15K views
15K views
MIT License