Loader by aaronross1

1.typing-indicator {
2  width: 60px;
3  height: 30px;
4  position: relative;
5  z-index: 4;
6}
7
8.typing-circle {
9  width: 8px;
10  height: 8px;
11  position: absolute;
12  border-radius: 50%;
13  background-color: #000;
14  left: 15%;
15  transform-origin: 50%;
16  animation: typing-circle7124 0.5s alternate infinite ease;
17}
18
19@keyframes typing-circle7124 {
20  0% {
21    top: 20px;
22    height: 5px;
23    border-radius: 50px 50px 25px 25px;
24    transform: scaleX(1.7);
25  }
26
27  40% {
28    height: 8px;
29    border-radius: 50%;
30    transform: scaleX(1);
31  }
32
33  100% {
34    top: 0%;
35  }
36}
37
38.typing-circle:nth-child(2) {
39  left: 45%;
40  animation-delay: 0.2s;
41}
42
43.typing-circle:nth-child(3) {
44  left: auto;
45  right: 15%;
46  animation-delay: 0.3s;
47}
48
49.typing-shadow {
50  width: 5px;
51  height: 4px;
52  border-radius: 50%;
53  background-color: rgba(0, 0, 0, 0.2);
54  position: absolute;
55  top: 30px;
56  transform-origin: 50%;
57  z-index: 3;
58  left: 15%;
59  filter: blur(1px);
60  animation: typing-shadow046 0.5s alternate infinite ease;
61}
62
63@keyframes typing-shadow046 {
64  0% {
65    transform: scaleX(1.5);
66  }
67
68  40% {
69    transform: scaleX(1);
70    opacity: 0.7;
71  }
72
73  100% {
74    transform: scaleX(0.2);
75    opacity: 0.4;
76  }
77}
78
79.typing-shadow:nth-child(4) {
80  left: 45%;
81  animation-delay: 0.2s;
82}
83
84.typing-shadow:nth-child(5) {
85  left: auto;
86  right: 15%;
87  animation-delay: 0.3s;
88}