929 views
1.circle { 2 position: relative; 3 left: -100px; 4 width: 0; 5 height: 0; 6 border: 50px solid #FDD835; 7 border-radius: 50%; 8 border-right-color: transparent; 9 animation: move 5s linear 0s infinite normal forwards; 10} 11 12.circle:before { 13 content: ""; 14 position: absolute; 15 top: -50px; 16 left: -50px; 17 width: 0; 18 height: 0; 19 border: 50px solid #FDD835; 20 border-radius: 50%; 21 border-right-color: transparent; 22 animation: chomp1 .25s ease-in-out 0s infinite normal forwards; 23} 24 25.circle:after { 26 content: ""; 27 position: absolute; 28 top: -50px; 29 left: -50px; 30 width: 0; 31 height: 0; 32 border: 50px solid #FDD835; 33 border-radius: 50%; 34 border-right-color: transparent; 35 animation: chomp2 .25s ease-in-out 0s infinite normal forwards; 36} 37 38.loader { 39 position: relative; 40 top: 50px; 41 width: 300px; 42 height: 0px; 43 border-top: 10px dotted black; 44 animation: loader_4013 5s ease-in-out 0s infinite normal forwards; 45} 46 47.dots { 48 position: relative; 49 top: 60px; 50 display: flex; 51 justify-content: center; 52 align-items: center; 53} 54 55.dot { 56 position: relative; 57 width: 10px; 58 height: 10px; 59 margin: 0 10px; 60 border-radius: 50%; 61 background: #1E88E5; 62 animation: dot1 5s linear 0s infinite none normal; 63} 64 65.dot:nth-child(1) { 66 animation-delay: 0s 67} 68 69.dot:nth-child(2) { 70 animation-delay: 0.25s 71} 72 73.dot:nth-child(3) { 74 animation-delay: 0.5s 75} 76 77.dot:nth-child(4) { 78 animation-delay: 0.75s 79} 80 81.dot:nth-child(5) { 82 animation-delay: 1s 83} 84 85.dot:nth-child(6) { 86 animation-delay: 1.25s 87} 88 89.dot:nth-child(7) { 90 animation-delay: 1.5s 91} 92 93.dot:nth-child(8) { 94 animation-delay: 1.75s 95} 96 97.dot:nth-child(9) { 98 animation-delay: 1.9s 99} 100 101.dot:nth-child(10) { 102 animation-delay: 2.1s 103} 104 105.dots2 { 106 position: relative; 107 top: 50px; 108 left: 10px; 109 display: flex; 110 justify-content: center; 111 align-items: center; 112} 113 114.dot2 { 115 position: relative; 116 left: -10px; 117 width: 10px; 118 height: 10px; 119 margin: 0 10px; 120 border-radius: 50%; 121 background: #F44336; 122 opacity: 0; 123 animation: dot2 5s linear 0s infinite none normal; 124} 125 126.dot2:nth-child(10) { 127 animation-delay: 2.5s 128} 129 130.dot2:nth-child(9) { 131 animation-delay: 2.75s 132} 133 134.dot2:nth-child(8) { 135 animation-delay: 3.0s 136} 137 138.dot2:nth-child(7) { 139 animation-delay: 3.25s 140} 141 142.dot2:nth-child(6) { 143 animation-delay: 3.5s 144} 145 146.dot2:nth-child(5) { 147 animation-delay: 3.75s 148} 149 150.dot2:nth-child(4) { 151 animation-delay: 4.0s 152} 153 154.dot2:nth-child(3) { 155 animation-delay: 4.25s 156} 157 158.dot2:nth-child(2) { 159 animation-delay: 4.5s 160} 161 162.dot2:nth-child(1) { 163 animation-delay: 4.6s 164} 165/* #F44336;, #1E88E5, #FDD835; */ 166@keyframes chomp1 { 167 0% { 168 transform: rotate(0deg); 169 } 170 171 50% { 172 transform: rotate(45deg); 173 } 174 175 100% { 176 transform: rotate(0deg); 177 } 178} 179 180@keyframes chomp2 { 181 0% { 182 transform: rotate(0deg); 183 } 184 185 50% { 186 transform: rotate(-45deg); 187 } 188 189 100% { 190 transform: rotate(0deg); 191 } 192} 193 194@keyframes move { 195 0%, 100% { 196 left: -100px; 197 } 198 199 0%, 48% { 200 transform: rotateY(0deg); 201 } 202 203 50%, 100% { 204 transform: rotateY(180deg); 205 } 206 207 50% { 208 left: 100%; 209 } 210} 211 212@keyframes loader_4013 { 213 0%, 100% { 214 border-top: 10px dotted #1E88E5; 215 } 216 217 0%, 48% { 218 border-top: 10px dotted #1E88E5; 219 } 220 221 50%, 100% { 222 border-top: 10px dotted #F44336; 223 } 224 225 50% { 226 border-top: 10px dotted #F44336; 227 } 228} 229 230@keyframes dot1 { 231 0%,4% { 232 background: #1E88E5; 233 opacity: 1; 234 } 235 236 5%,94% { 237 background: #F44336; 238 opacity: 0; 239 } 240 241 95%,100% { 242 background: #1E88E5; 243 opacity: 1; 244 } 245} 246 247@keyframes dot2 { 248 0%,4% { 249 background: #F44336; 250 opacity: 1; 251 } 252 253 5%,94% { 254 opacity: 0; 255 } 256 257 95%,100% { 258 background: #F44336; 259 opacity: 1; 260 } 261}
JkHuger
JkHuger
MIT License