1.lds-ellipsis {
2  display: inline-block;
3  position: relative;
4  width: 80px;
5  height: 80px;
6}
7
8.lds-ellipsis div {
9  position: absolute;
10  top: 33px;
11  width: 13px;
12  height: 13px;
13  border-radius: 50%;
14  background: #fff;
15  animation-timing-function: cubic-bezier(0, 1, 1, 0);
16}
17
18.lds-ellipsis div:nth-child(1) {
19  left: 8px;
20  animation: lds-ellipsis1 0.6s infinite;
21}
22
23.lds-ellipsis div:nth-child(2) {
24  left: 8px;
25  animation: lds-ellipsis2 0.6s infinite;
26}
27
28.lds-ellipsis div:nth-child(3) {
29  left: 32px;
30  animation: lds-ellipsis2 0.6s infinite;
31}
32
33.lds-ellipsis div:nth-child(4) {
34  left: 56px;
35  animation: lds-ellipsis3 0.6s infinite;
36}
37
38@keyframes lds-ellipsis1 {
39  0% {
40    transform: scale(0);
41  }
42
43  100% {
44    transform: scale(1);
45  }
46}
47
48@keyframes lds-ellipsis3 {
49  0% {
50    transform: scale(1);
51  }
52
53  100% {
54    transform: scale(0);
55  }
56}
57
58@keyframes lds-ellipsis2 {
59  0% {
60    transform: translate(0, 0);
61  }
62
63  100% {
64    transform: translate(24px, 0);
65  }
66}
67