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}