Loader by Galahhad
#212121
1.ui-abstergo { 2 --primary: #fff; 3 --secondary: rgba(255, 255, 255, 0.3); 4 --shadow-blur: 3px; 5 --text-shadow-blur: 3px; 6 --animation-duration: 2s; 7 --size: 1; 8} 9 10.abstergo-loader * { 11 -webkit-box-sizing: content-box; 12 box-sizing: content-box; 13} 14 15.ui-abstergo { 16 display: -webkit-box; 17 display: -ms-flexbox; 18 display: flex; 19 -webkit-box-orient: vertical; 20 -webkit-box-direction: normal; 21 -ms-flex-direction: column; 22 flex-direction: column; 23 -webkit-box-align: center; 24 -ms-flex-align: center; 25 align-items: center; 26 row-gap: 30px; 27 scale: var(--size); 28} 29 30.ui-abstergo .ui-text { 31 color: var(--primary); 32 text-shadow: 0 0 var(--text-shadow-blur) var(--secondary); 33 font-family: Menlo, sans-serif; 34 display: -webkit-box; 35 display: -ms-flexbox; 36 display: flex; 37 -webkit-box-align: baseline; 38 -ms-flex-align: baseline; 39 align-items: baseline; 40 -webkit-column-gap: 3px; 41 -moz-column-gap: 3px; 42 column-gap: 3px; 43} 44 45.ui-abstergo .ui-dot { 46 content: ""; 47 display: block; 48 width: 3px; 49 height: 3px; 50 -webkit-animation: dots var(--animation-duration) infinite linear; 51 animation: dots var(--animation-duration) infinite linear; 52 -webkit-animation-delay: .4s; 53 animation-delay: .4s; 54 background-color: var(--primary); 55} 56 57.ui-abstergo .ui-dot:nth-child(2) { 58 -webkit-animation-delay: .8s; 59 animation-delay: .8s; 60} 61 62.ui-abstergo .ui-dot:nth-child(3) { 63 -webkit-animation-delay: 1.2s; 64 animation-delay: 1.2s; 65} 66 67.ui-abstergo .ui-dot+.ui-dot { 68 margin-left: 3px; 69} 70 71.abstergo-loader { 72 width: 103px; 73 height: 90px; 74 position: relative; 75} 76 77.abstergo-loader div { 78 width: 50px; 79 border-right: 12px solid transparent; 80 border-left: 12px solid transparent; 81 border-top: 21px solid var(--primary); 82 position: absolute; 83 -webkit-filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary)); 84 filter: drop-shadow(0 0 var(--shadow-blur) var(--secondary)); 85} 86 87.abstergo-loader div:nth-child(1) { 88 top: 27px; 89 left: 7px; 90 rotate: -60deg; 91 -webkit-animation: line1 var(--animation-duration) linear infinite alternate; 92 animation: line1 var(--animation-duration) linear infinite alternate; 93} 94 95.abstergo-loader div:nth-child(2) { 96 bottom: 2px; 97 left: 0; 98 rotate: 180deg; 99 -webkit-animation: line2 var(--animation-duration) linear infinite alternate; 100 animation: line2 var(--animation-duration) linear infinite alternate; 101} 102 103.abstergo-loader div:nth-child(3) { 104 bottom: 16px; 105 right: -9px; 106 rotate: 60deg; 107 -webkit-animation: line3 var(--animation-duration) linear infinite alternate; 108 animation: line3 var(--animation-duration) linear infinite alternate; 109} 110 111.abstergo-loader:hover div:nth-child(1) { 112 top: 21px; 113 left: 14px; 114 rotate: 60deg; 115} 116 117.abstergo-loader:hover div:nth-child(2) { 118 bottom: 5px; 119 left: -8px; 120 rotate: 300deg; 121} 122 123.abstergo-loader:hover div:nth-child(3) { 124 bottom: 7px; 125 right: -11px; 126 rotate: 180deg; 127} 128 129@-webkit-keyframes line1 { 130 0%, 131 40% { 132 top: 27px; 133 left: 7px; 134 rotate: -60deg; 135 } 136 137 60%, 138 100% { 139 top: 22px; 140 left: 14px; 141 rotate: 60deg; 142 } 143} 144 145@keyframes line1 { 146 0%, 147 40% { 148 top: 27px; 149 left: 7px; 150 rotate: -60deg; 151 } 152 153 60%, 154 100% { 155 top: 22px; 156 left: 14px; 157 rotate: 60deg; 158 } 159} 160 161@-webkit-keyframes line2 { 162 0%, 163 40% { 164 bottom: 2px; 165 left: 0; 166 rotate: 180deg; 167 } 168 169 60%, 170 100% { 171 bottom: 5px; 172 left: -8px; 173 rotate: 300deg; 174 } 175} 176 177@keyframes line2 { 178 0%, 179 40% { 180 bottom: 2px; 181 left: 0; 182 rotate: 180deg; 183 } 184 185 60%, 186 100% { 187 bottom: 5px; 188 left: -8px; 189 rotate: 300deg; 190 } 191} 192 193@-webkit-keyframes line3 { 194 0%, 195 40% { 196 bottom: 16px; 197 right: -9px; 198 rotate: 60deg; 199 } 200 201 60%, 202 100% { 203 bottom: 7px; 204 right: -11px; 205 rotate: 180deg; 206 } 207} 208 209@keyframes line3 { 210 0%, 211 40% { 212 bottom: 16px; 213 right: -9px; 214 rotate: 60deg; 215 } 216 217 60%, 218 100% { 219 bottom: 7px; 220 right: -11px; 221 rotate: 180deg; 222 } 223} 224 225@-webkit-keyframes dots { 226 0% { 227 background-color: var(--secondary); 228 } 229 230 30% { 231 background-color: var(--primary); 232 } 233 234 70%, 100% { 235 background-color: var(--secondary); 236 } 237} 238 239@keyframes dots { 240 0% { 241 background-color: var(--secondary); 242 } 243 244 30% { 245 background-color: var(--primary); 246 } 247 248 70%, 100% { 249 background-color: var(--secondary); 250 } 251}
1.3K views
1.3K views
MIT License