1.dots-container {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 100%;
6  width: 100%;
7}
8
9.dot {
10  height: 20px;
11  width: 20px;
12  margin-right: 10px;
13  border-radius: 10px;
14  background-color: #b3d4fc;
15  animation: pulse 1.5s infinite ease-in-out;
16}
17
18.dot:last-child {
19  margin-right: 0;
20}
21
22.dot:nth-child(1) {
23  animation-delay: -0.3s;
24}
25
26.dot:nth-child(2) {
27  animation-delay: -0.1s;
28}
29
30.dot:nth-child(3) {
31  animation-delay: 0.1s;
32}
33
34@keyframes pulse {
35  0% {
36    transform: scale(0.8);
37    background-color: #b3d4fc;
38    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
39  }
40
41  50% {
42    transform: scale(1.2);
43    background-color: #6793fb;
44    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
45  }
46
47  100% {
48    transform: scale(0.8);
49    background-color: #b3d4fc;
50    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
51  }
52}