1.spinner {
2 --clr: rgb(0, 113, 128);
3 --gap: 6px;
4   /* gap between each circle */
5 width: 100px;
6 height: 100px;
7 display: flex;
8 justify-content: center;
9 align-items: center;
10 gap: var(--gap);
11}
12
13.spinner span {
14 width: 20px;
15 height: 20px;
16 border-radius: 100%;
17 background-color: var(--clr);
18 opacity: 0;
19}
20
21.spinner span:nth-child(1) {
22 animation: fade 1s ease-in-out infinite;
23}
24
25.spinner span:nth-child(2) {
26 animation: fade 1s ease-in-out 0.33s infinite;
27}
28
29.spinner span:nth-child(3) {
30 animation: fade 1s ease-in-out 0.66s infinite;
31}
32
33@keyframes fade {
34 0%, 100% {
35  opacity: 1;
36 }
37
38 60% {
39  opacity: 0;
40 }
41}
42