Loader by DevPTG
#212121
1#load { 2 position: absolute; 3 width: 600px; 4 height: 36px; 5 left: 50%; 6 top: 40%; 7 margin-left: -300px; 8 overflow: visible; 9 -webkit-user-select: none; 10 -moz-user-select: none; 11 -ms-user-select: none; 12 user-select: none; 13 cursor: default; 14} 15 16#load div { 17 position: absolute; 18 width: 20px; 19 height: 36px; 20 opacity: 0; 21 font-family: Helvetica, Arial, sans-serif; 22 animation: move 2s linear infinite; 23 -o-animation: move 2s linear infinite; 24 -moz-animation: move 2s linear infinite; 25 -webkit-animation: move 2s linear infinite; 26 transform: rotate(180deg); 27 -o-transform: rotate(180deg); 28 -moz-transform: rotate(180deg); 29 -webkit-transform: rotate(180deg); 30 color: #35C4F0; 31} 32 33#load div:nth-child(2) { 34 animation-delay: 0.2s; 35 -o-animation-delay: 0.2s; 36 -moz-animation-delay: 0.2s; 37 -webkit-animation-delay: 0.2s; 38} 39 40#load div:nth-child(3) { 41 animation-delay: 0.4s; 42 -o-animation-delay: 0.4s; 43 -webkit-animation-delay: 0.4s; 44 -webkit-animation-delay: 0.4s; 45} 46 47#load div:nth-child(4) { 48 animation-delay: 0.6s; 49 -o-animation-delay: 0.6s; 50 -moz-animation-delay: 0.6s; 51 -webkit-animation-delay: 0.6s; 52} 53 54#load div:nth-child(5) { 55 animation-delay: 0.8s; 56 -o-animation-delay: 0.8s; 57 -moz-animation-delay: 0.8s; 58 -webkit-animation-delay: 0.8s; 59} 60 61#load div:nth-child(6) { 62 animation-delay: 1s; 63 -o-animation-delay: 1s; 64 -moz-animation-delay: 1s; 65 -webkit-animation-delay: 1s; 66} 67 68#load div:nth-child(7) { 69 animation-delay: 1.2s; 70 -o-animation-delay: 1.2s; 71 -moz-animation-delay: 1.2s; 72 -webkit-animation-delay: 1.2s; 73} 74 75@keyframes move { 76 0% { 77 left: 0; 78 opacity: 0; 79 } 80 81 35% { 82 left: 41%; 83 -moz-transform: rotate(0deg); 84 -webkit-transform: rotate(0deg); 85 -o-transform: rotate(0deg); 86 transform: rotate(0deg); 87 opacity: 1; 88 } 89 90 65% { 91 left: 59%; 92 -moz-transform: rotate(0deg); 93 -webkit-transform: rotate(0deg); 94 -o-transform: rotate(0deg); 95 transform: rotate(0deg); 96 opacity: 1; 97 } 98 99 100% { 100 left: 100%; 101 -moz-transform: rotate(-180deg); 102 -webkit-transform: rotate(-180deg); 103 -o-transform: rotate(-180deg); 104 transform: rotate(-180deg); 105 opacity: 0; 106 } 107} 108 109@-moz-keyframes move { 110 0% { 111 left: 0; 112 opacity: 0; 113 } 114 115 35% { 116 left: 41%; 117 -moz-transform: rotate(0deg); 118 transform: rotate(0deg); 119 opacity: 1; 120 } 121 122 65% { 123 left: 59%; 124 -moz-transform: rotate(0deg); 125 transform: rotate(0deg); 126 opacity: 1; 127 } 128 129 100% { 130 left: 100%; 131 -moz-transform: rotate(-180deg); 132 transform: rotate(-180deg); 133 opacity: 0; 134 } 135} 136 137@-webkit-keyframes move { 138 0% { 139 left: 0; 140 opacity: 0; 141 } 142 143 35% { 144 left: 41%; 145 -webkit-transform: rotate(0deg); 146 transform: rotate(0deg); 147 opacity: 1; 148 } 149 150 65% { 151 left: 59%; 152 -webkit-transform: rotate(0deg); 153 transform: rotate(0deg); 154 opacity: 1; 155 } 156 157 100% { 158 left: 100%; 159 -webkit-transform: rotate(-180deg); 160 transform: rotate(-180deg); 161 opacity: 0; 162 } 163} 164 165@-o-keyframes move { 166 0% { 167 left: 0; 168 opacity: 0; 169 } 170 171 35% { 172 left: 41%; 173 -o-transform: rotate(0deg); 174 transform: rotate(0deg); 175 opacity: 1; 176 } 177 178 65% { 179 left: 59%; 180 -o-transform: rotate(0deg); 181 transform: rotate(0deg); 182 opacity: 1; 183 } 184 185 100% { 186 left: 100%; 187 -o-transform: rotate(-180deg); 188 transform: rotate(-180deg); 189 opacity: 0; 190 } 191}
1.4K views
1.4K views
MIT License