1.loading {
2  transform: translate(0%, -50%);
3}
4
5.l {
6  color: black;
7  opacity: 0;
8  animation: op 2s ease-in-out infinite;
9  animation-delay: 0.2s;
10}
11
12.o {
13  color: black;
14  opacity: 0;
15  animation: op 2s ease-in-out infinite;
16  animation-delay: 0.4s;
17}
18
19.a {
20  color: black;
21  opacity: 0;
22  animation: op 2s ease-in-out infinite;
23  animation-delay: 0.6s;
24}
25
26.d {
27  color: black;
28  opacity: 0;
29  animation: op 2s ease-in-out infinite;
30  animation-delay: 0.8s;
31}
32
33.i {
34  color: black;
35  opacity: 0;
36  animation: op 2s ease-in-out infinite;
37  animation-delay: 1s;
38}
39
40.n {
41  color: black;
42  opacity: 0;
43  animation: op 2s ease-in-out infinite;
44  animation-delay: 1.2s;
45}
46
47.g {
48  color: black;
49  opacity: 0;
50  animation: op 2s ease-in-out infinite;
51  animation-delay: 1.4s;
52}
53
54.d1 {
55  color: black;
56  opacity: 0;
57  animation: op1 2s ease-in-out infinite;
58  animation-delay: 1.6s;
59}
60
61.d2 {
62  color: black;
63  opacity: 0;
64  animation: op1 2s ease-in-out infinite;
65  animation-delay: 2s;
66}
67
68.load {
69  position: relative;
70  width: 1.2em;
71  height: 1.2em;
72  border-radius: 50%;
73}
74
75.progress {
76  top: 50%;
77  left: -80%;
78  position: absolute;
79  margin-top: 2.2em;
80  transform: translate(10%, -50%);
81  content: '';
82  width: 3.1em;
83  height: 3.1em;
84  background: transparent;
85  border-radius: 50%;
86  animation: load_37100 2s ease-in-out infinite;
87  animation-delay: 1s;
88}
89
90@keyframes load_37100 {
91  0% {
92    background-color: #DB4437;
93  }
94
95  25% {
96    background-color: #F4B400;
97  }
98
99  75% {
100    background-color: #0F9D58;
101  }
102
103  100% {
104    background-color: #4285F4;
105  }
106}
107
108.progress:nth-child(2) {
109  left: 50%;
110  animation-delay: 1.3s;
111}
112
113.progress:nth-child(3) {
114  left: 180%;
115  animation-delay: 1.7s;
116}
117
118.progress:nth-child(4) {
119  left: 300%;
120  animation-delay: 2s;
121}
122
123@keyframes op {
124  0% {
125    color: black;
126    opacity: 1;
127  }
128
129  50% {
130    color: green;
131    opacity: 1;
132  }
133
134  100% {
135    color: black;
136    opacity: 1;
137  }
138}
139
140@keyframes op1 {
141  0% {
142    color: black;
143    opacity: 1;
144  }
145
146  50% {
147    color: green;
148    opacity: 0;
149  }
150
151  100% {
152    color: black;
153    opacity: 1;
154  }
155}