Loader by SouravBandyopadhyay
#e8e8e8
1.hourglassBackground { 2 position: relative; 3 background-color: rgb(71, 60, 60); 4 height: 130px; 5 width: 130px; 6 border-radius: 50%; 7 margin: 30px auto; 8} 9 10.hourglassContainer { 11 position: absolute; 12 top: 30px; 13 left: 40px; 14 width: 50px; 15 height: 70px; 16 -webkit-animation: hourglassRotate 2s ease-in 0s infinite; 17 animation: hourglassRotate 2s ease-in 0s infinite; 18 transform-style: preserve-3d; 19 perspective: 1000px; 20} 21 22.hourglassContainer div, 23.hourglassContainer div:before, 24.hourglassContainer div:after { 25 transform-style: preserve-3d; 26} 27 28@-webkit-keyframes hourglassRotate { 29 0% { 30 transform: rotateX(0deg); 31 } 32 33 50% { 34 transform: rotateX(180deg); 35 } 36 37 100% { 38 transform: rotateX(180deg); 39 } 40} 41 42@keyframes hourglassRotate { 43 0% { 44 transform: rotateX(0deg); 45 } 46 47 50% { 48 transform: rotateX(180deg); 49 } 50 51 100% { 52 transform: rotateX(180deg); 53 } 54} 55 56.hourglassCapTop { 57 top: 0; 58} 59 60.hourglassCapTop:before { 61 top: -25px; 62} 63 64.hourglassCapTop:after { 65 top: -20px; 66} 67 68.hourglassCapBottom { 69 bottom: 0; 70} 71 72.hourglassCapBottom:before { 73 bottom: -25px; 74} 75 76.hourglassCapBottom:after { 77 bottom: -20px; 78} 79 80.hourglassGlassTop { 81 transform: rotateX(90deg); 82 position: absolute; 83 top: -16px; 84 left: 3px; 85 border-radius: 50%; 86 width: 44px; 87 height: 44px; 88 background-color: #999999; 89} 90 91.hourglassGlass { 92 perspective: 100px; 93 position: absolute; 94 top: 32px; 95 left: 20px; 96 width: 10px; 97 height: 6px; 98 background-color: #999999; 99 opacity: 0.5; 100} 101 102.hourglassGlass:before, 103.hourglassGlass:after { 104 content: ''; 105 display: block; 106 position: absolute; 107 background-color: #999999; 108 left: -17px; 109 width: 44px; 110 height: 28px; 111} 112 113.hourglassGlass:before { 114 top: -27px; 115 border-radius: 0 0 25px 25px; 116} 117 118.hourglassGlass:after { 119 bottom: -27px; 120 border-radius: 25px 25px 0 0; 121} 122 123.hourglassCurves:before, 124.hourglassCurves:after { 125 content: ''; 126 display: block; 127 position: absolute; 128 top: 32px; 129 width: 6px; 130 height: 6px; 131 border-radius: 50%; 132 background-color: #333; 133 animation: hideCurves 2s ease-in 0s infinite; 134} 135 136.hourglassCurves:before { 137 left: 15px; 138} 139 140.hourglassCurves:after { 141 left: 29px; 142} 143 144@-webkit-keyframes hideCurves { 145 0% { 146 opacity: 1; 147 } 148 149 25% { 150 opacity: 0; 151 } 152 153 30% { 154 opacity: 0; 155 } 156 157 40% { 158 opacity: 1; 159 } 160 161 100% { 162 opacity: 1; 163 } 164} 165 166@keyframes hideCurves { 167 0% { 168 opacity: 1; 169 } 170 171 25% { 172 opacity: 0; 173 } 174 175 30% { 176 opacity: 0; 177 } 178 179 40% { 180 opacity: 1; 181 } 182 183 100% { 184 opacity: 1; 185 } 186} 187 188.hourglassSandStream:before { 189 content: ''; 190 display: block; 191 position: absolute; 192 left: 24px; 193 width: 3px; 194 background-color: white; 195 -webkit-animation: sandStream1 2s ease-in 0s infinite; 196 animation: sandStream1 2s ease-in 0s infinite; 197} 198 199.hourglassSandStream:after { 200 content: ''; 201 display: block; 202 position: absolute; 203 top: 36px; 204 left: 19px; 205 border-left: 6px solid transparent; 206 border-right: 6px solid transparent; 207 border-bottom: 6px solid #fff; 208 animation: sandStream2 2s ease-in 0s infinite; 209} 210 211@-webkit-keyframes sandStream1 { 212 0% { 213 height: 0; 214 top: 35px; 215 } 216 217 50% { 218 height: 0; 219 top: 45px; 220 } 221 222 60% { 223 height: 35px; 224 top: 8px; 225 } 226 227 85% { 228 height: 35px; 229 top: 8px; 230 } 231 232 100% { 233 height: 0; 234 top: 8px; 235 } 236} 237 238@keyframes sandStream1 { 239 0% { 240 height: 0; 241 top: 35px; 242 } 243 244 50% { 245 height: 0; 246 top: 45px; 247 } 248 249 60% { 250 height: 35px; 251 top: 8px; 252 } 253 254 85% { 255 height: 35px; 256 top: 8px; 257 } 258 259 100% { 260 height: 0; 261 top: 8px; 262 } 263} 264 265@-webkit-keyframes sandStream2 { 266 0% { 267 opacity: 0; 268 } 269 270 50% { 271 opacity: 0; 272 } 273 274 51% { 275 opacity: 1; 276 } 277 278 90% { 279 opacity: 1; 280 } 281 282 91% { 283 opacity: 0; 284 } 285 286 100% { 287 opacity: 0; 288 } 289} 290 291@keyframes sandStream2 { 292 0% { 293 opacity: 0; 294 } 295 296 50% { 297 opacity: 0; 298 } 299 300 51% { 301 opacity: 1; 302 } 303 304 90% { 305 opacity: 1; 306 } 307 308 91% { 309 opacity: 0; 310 } 311 312 100% { 313 opacity: 0; 314 } 315} 316 317.hourglassSand:before, 318.hourglassSand:after { 319 content: ''; 320 display: block; 321 position: absolute; 322 left: 6px; 323 background-color: white; 324 perspective: 500px; 325} 326 327.hourglassSand:before { 328 top: 8px; 329 width: 39px; 330 border-radius: 3px 3px 30px 30px; 331 animation: sandFillup 2s ease-in 0s infinite; 332} 333 334.hourglassSand:after { 335 border-radius: 30px 30px 3px 3px; 336 animation: sandDeplete 2s ease-in 0s infinite; 337} 338 339@-webkit-keyframes sandFillup { 340 0% { 341 opacity: 0; 342 height: 0; 343 } 344 345 60% { 346 opacity: 1; 347 height: 0; 348 } 349 350 100% { 351 opacity: 1; 352 height: 17px; 353 } 354} 355 356@keyframes sandFillup { 357 0% { 358 opacity: 0; 359 height: 0; 360 } 361 362 60% { 363 opacity: 1; 364 height: 0; 365 } 366 367 100% { 368 opacity: 1; 369 height: 17px; 370 } 371} 372 373@-webkit-keyframes sandDeplete { 374 0% { 375 opacity: 0; 376 top: 45px; 377 height: 17px; 378 width: 38px; 379 left: 6px; 380 } 381 382 1% { 383 opacity: 1; 384 top: 45px; 385 height: 17px; 386 width: 38px; 387 left: 6px; 388 } 389 390 24% { 391 opacity: 1; 392 top: 45px; 393 height: 17px; 394 width: 38px; 395 left: 6px; 396 } 397 398 25% { 399 opacity: 1; 400 top: 41px; 401 height: 17px; 402 width: 38px; 403 left: 6px; 404 } 405 406 50% { 407 opacity: 1; 408 top: 41px; 409 height: 17px; 410 width: 38px; 411 left: 6px; 412 } 413 414 90% { 415 opacity: 1; 416 top: 41px; 417 height: 0; 418 width: 10px; 419 left: 20px; 420 } 421} 422 423@keyframes sandDeplete { 424 0% { 425 opacity: 0; 426 top: 45px; 427 height: 17px; 428 width: 38px; 429 left: 6px; 430 } 431 432 1% { 433 opacity: 1; 434 top: 45px; 435 height: 17px; 436 width: 38px; 437 left: 6px; 438 } 439 440 24% { 441 opacity: 1; 442 top: 45px; 443 height: 17px; 444 width: 38px; 445 left: 6px; 446 } 447 448 25% { 449 opacity: 1; 450 top: 41px; 451 height: 17px; 452 width: 38px; 453 left: 6px; 454 } 455 456 50% { 457 opacity: 1; 458 top: 41px; 459 height: 17px; 460 width: 38px; 461 left: 6px; 462 } 463 464 90% { 465 opacity: 1; 466 top: 41px; 467 height: 0; 468 width: 10px; 469 left: 20px; 470 } 471} 472
6K views
6K views
MIT License