1.container {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  display: flex;
6  gap: 0.625em;
7  transform: translate(-50%, -50%);
8}
9
10.container span {
11  border-radius: 50%;
12  height: 1.5em;
13  width: 1.5em;
14}
15
16.container span::before {
17  content: "";
18  display: block;
19  border-radius: inherit;
20  height: inherit;
21  width: inherit;
22  background-color: inherit;
23  animation: ripple 1.8s ease-out infinite;
24  animation-delay: inherit;
25  z-index: -1;
26}
27
28.container span:nth-of-type(1) {
29  background-color: #84cdfa;
30}
31
32.container span:nth-of-type(2) {
33  background-color: #5ad1cd;
34  animation-delay: 0.2s;
35}
36
37.container span:nth-of-type(3) {
38  background-color: #9b59b6;
39  animation-delay: 0.4s;
40}
41
42@keyframes ripple {
43  from {
44    opacity: 1;
45    transform: scale(0);
46  }
47
48  to {
49    opacity: 0;
50    transform: scale(3);
51  }
52}