Loader by JAJaydipPrajapati1910
#212121
1.loader { 2 width: 112px; 3 height: 112px; 4} 5 6.box1, 7.box2, 8.box3 { 9 border: 16px solid red; 10 box-sizing: border-box; 11 position: absolute; 12 display: block; 13} 14 15.box1 { 16 width: 112px; 17 height: 48px; 18 margin-top: 64px; 19 margin-left: 0px; 20 animation: abox1 4s 1s forwards ease-in-out infinite; 21} 22 23.box2 { 24 width: 48px; 25 height: 48px; 26 margin-top: 0px; 27 margin-left: 0px; 28 animation: abox2 4s 1s forwards ease-in-out infinite; 29} 30 31.box3 { 32 width: 48px; 33 height: 48px; 34 margin-top: 0px; 35 margin-left: 64px; 36 animation: abox3 4s 1s forwards ease-in-out infinite; 37} 38 39@keyframes abox1 { 40 0% { 41 width: 112px; 42 height: 48px; 43 margin-top: 64px; 44 margin-left: 0px; 45 } 46 47 12.5% { 48 width: 48px; 49 height: 48px; 50 margin-top: 64px; 51 margin-left: 0px; 52 } 53 54 25% { 55 width: 48px; 56 height: 48px; 57 margin-top: 64px; 58 margin-left: 0px; 59 } 60 61 37.5% { 62 width: 48px; 63 height: 48px; 64 margin-top: 64px; 65 margin-left: 0px; 66 } 67 68 50% { 69 width: 48px; 70 height: 48px; 71 margin-top: 64px; 72 margin-left: 0px; 73 } 74 75 62.5% { 76 width: 48px; 77 height: 48px; 78 margin-top: 64px; 79 margin-left: 0px; 80 } 81 82 75% { 83 width: 48px; 84 height: 112px; 85 margin-top: 0px; 86 margin-left: 0px; 87 } 88 89 87.5% { 90 width: 48px; 91 height: 48px; 92 margin-top: 0px; 93 margin-left: 0px; 94 } 95 96 100% { 97 width: 48px; 98 height: 48px; 99 margin-top: 0px; 100 margin-left: 0px; 101 } 102} 103 104@keyframes abox2 { 105 0% { 106 width: 48px; 107 height: 48px; 108 margin-top: 0px; 109 margin-left: 0px; 110 } 111 112 12.5% { 113 width: 48px; 114 height: 48px; 115 margin-top: 0px; 116 margin-left: 0px; 117 } 118 119 25% { 120 width: 48px; 121 height: 48px; 122 margin-top: 0px; 123 margin-left: 0px; 124 } 125 126 37.5% { 127 width: 48px; 128 height: 48px; 129 margin-top: 0px; 130 margin-left: 0px; 131 } 132 133 50% { 134 width: 112px; 135 height: 48px; 136 margin-top: 0px; 137 margin-left: 0px; 138 } 139 140 62.5% { 141 width: 48px; 142 height: 48px; 143 margin-top: 0px; 144 margin-left: 64px; 145 } 146 147 75% { 148 width: 48px; 149 height: 48px; 150 margin-top: 0px; 151 margin-left: 64px; 152 } 153 154 87.5% { 155 width: 48px; 156 height: 48px; 157 margin-top: 0px; 158 margin-left: 64px; 159 } 160 161 100% { 162 width: 48px; 163 height: 48px; 164 margin-top: 0px; 165 margin-left: 64px; 166 } 167} 168 169@keyframes abox3 { 170 0% { 171 width: 48px; 172 height: 48px; 173 margin-top: 0px; 174 margin-left: 64px; 175 } 176 177 12.5% { 178 width: 48px; 179 height: 48px; 180 margin-top: 0px; 181 margin-left: 64px; 182 } 183 184 25% { 185 width: 48px; 186 height: 112px; 187 margin-top: 0px; 188 margin-left: 64px; 189 } 190 191 37.5% { 192 width: 48px; 193 height: 48px; 194 margin-top: 64px; 195 margin-left: 64px; 196 } 197 198 50% { 199 width: 48px; 200 height: 48px; 201 margin-top: 64px; 202 margin-left: 64px; 203 } 204 205 62.5% { 206 width: 48px; 207 height: 48px; 208 margin-top: 64px; 209 margin-left: 64px; 210 } 211 212 75% { 213 width: 48px; 214 height: 48px; 215 margin-top: 64px; 216 margin-left: 64px; 217 } 218 219 87.5% { 220 width: 48px; 221 height: 48px; 222 margin-top: 64px; 223 margin-left: 64px; 224 } 225 226 100% { 227 width: 112px; 228 height: 48px; 229 margin-top: 64px; 230 margin-left: 0px; 231 } 232} 233
1K views
Variation of aloader
Original Post
Variations
2 MIT License