1 2 3 4 5 6 7 8 9 10 |
<div id="loading" style="display: block;"> <div id="loading-center"> <div id="loading-center-absolute"> <div class="object" id="object_four" style="display: block;"></div> <div class="object" id="object_three" style="display: block;"></div> <div class="object" id="object_two" style="display: block;"></div> <div class="object" id="object_one" style="display: block;"></div> </div> </div> </div> |
preloader.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
#loading { background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; right: 0; left: 0; bottom: 0; z-index: 100000000; } #loading-center { width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .object { -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; position: absolute; border-top: 5px solid #374048; border-bottom: 5px solid transparent; border-left: 5px solid #374048; border-right: 5px solid transparent; -webkit-animation: animate 2s infinite; animation: animate 2s infinite; } #object_one { left: 75px; top: 75px; width: 50px; height: 50px; } #object_two { left: 65px; top: 65px; width: 70px; height: 70px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } #object_three { left: 55px; top: 55px; width: 90px; height: 90px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } #object_four { left: 45px; top: 45px; width: 110px; height: 110px; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8); -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); } } @keyframes animate { 50% { -ms-transform: rotate(360deg) scale(0.8); -webkit-transform: rotate(360deg) scale(0.8); transform: rotate(360deg) scale(0.8); } } |