Loader by fanishah
#212121
1.container { 2 width: 200px; 3 height: 200px; 4 top: 50%; 5 left: 50%; 6 transform: translate(-50%,-50%); 7 position: absolute; 8} 9 10.container div { 11 width: 100px; 12 height: 100px; 13 top: 50px; 14 left: 50px; 15 display: block; 16 position: absolute; 17} 18 19.top-left { 20 animation: tl 7.5s ease infinite 21} 22 23.top-right { 24 animation: tr 7.5s ease infinite 25} 26 27.bottom-left { 28 animation: bl 7.5s ease infinite 29} 30 31.bottom-right { 32 animation: br 7.5s ease infinite 33} 34 35.container div:before, 36.container div:after { 37 display: block; 38 position: absolute; 39 content: "" 40} 41 42.container div:before { 43 width: 50px; 44 height: 50px 45} 46 47.top-left:before { 48 background: rgb(251, 189, 4); 49 top: 0; 50 left: 0; 51 border-radius: 100% 0 0 0 52} 53 54.top-right:before { 55 background: rgb(234, 67, 52); 56 top: 0; 57 right: 0; 58 border-radius: 0 100% 0 0 59} 60 61.bottom-left:before { 62 background: rgb(52, 168, 83); 63 bottom: 0; 64 left: 0; 65 border-radius: 0 0 0 100% 66} 67 68.bottom-right:before { 69 background: rgb(67, 135, 244); 70 bottom: 0; 71 right: 0; 72 border-radius: 0 0 100% 0 73} 74 75.container div:after { 76 background: rgb(33, 33, 33); 77 width: 25px; 78 height: 25px; 79 z-index: 1 80} 81 82.top-left:after { 83 top: 25px; 84 left: 25px; 85 border-radius: 100% 0 0 0 86} 87 88.top-right:after { 89 top: 25px; 90 right: 25px; 91 border-radius: 0 100% 0 0 92} 93 94.bottom-left:after { 95 bottom: 25px; 96 left: 25px; 97 border-radius: 0 0 0 100% 98} 99 100.bottom-right:after { 101 bottom: 25px; 102 right: 25px; 103 border-radius: 0 0 100% 0 104} 105 106@keyframes tl { 107 0%,96%,100% { 108 transform: rotate(0deg) 109 } 110 111 12% { 112 transform: rotate(-45deg) 113 } 114 115 24% { 116 transform: rotate(-90deg) 117 } 118 119 36% { 120 transform: rotate(-135deg) 121 } 122 123 48% { 124 left: 50px; 125 transform: rotate(-180deg) 126 } 127 128 60% { 129 left: 125px; 130 opacity: 1; 131 transform: rotate(-135deg) 132 } 133 134 61%,95% { 135 opacity: 0 136 } 137} 138 139@keyframes tr { 140 0% { 141 transform: rotate(0deg) 142 } 143 144 12% { 145 transform: rotate(-45deg) 146 } 147 148 24% { 149 transform: rotate(-90deg) 150 } 151 152 36% { 153 transform: rotate(-135deg) 154 } 155 156 48% { 157 transform: rotate(-180deg) 158 } 159 160 60% { 161 transform: rotate(-225deg) 162 } 163 164 72% { 165 transform: rotate(-270deg) 166 } 167 168 84% { 169 transform: rotate(-315deg) 170 } 171 172 96%,100% { 173 transform: rotate(-360deg) 174 } 175} 176 177@keyframes bl { 178 0%,100% { 179 transform: rotate(0deg) 180 } 181 182 12% { 183 transform: rotate(-45deg) 184 } 185 186 24% { 187 left: 50px; 188 transform: rotate(-90deg) 189 } 190 191 36% { 192 left: 125px; 193 opacity: 1; 194 transform: rotate(-45deg) 195 } 196 197 37%,83% { 198 opacity: 0 199 } 200 201 84% { 202 left: -25px; 203 opacity: 1; 204 transform: rotate(-45deg) 205 } 206 207 96% { 208 left: 50px; 209 transform: rotate(0deg) 210 } 211} 212 213@keyframes br { 214 0%,96%,100% { 215 transform: rotate(0deg) 216 } 217 218 12% { 219 left: 125px; 220 opacity: 1; 221 transform: rotate(45deg) 222 } 223 224 13%,59% { 225 opacity: 0 226 } 227 228 60% { 229 left: -25px; 230 opacity: 1; 231 transform: rotate(45deg) 232 } 233 234 72% { 235 left: 50px; 236 transform: rotate(90deg) 237 } 238 239 84% { 240 transform: rotate(45deg) 241 } 242}
770 views
770 views
MIT License