1.dot-wave {
2  --uib-size: 50px;
3  --uib-speed: 0.6s;
4  --uib-color: #0d0909;
5  display: flex;
6  flex-flow: row nowrap;
7  align-items: center;
8  justify-content: space-between;
9  width: var(--uib-size);
10  height: calc(var(--uib-size) * 0.17);
11  padding-top: calc(var(--uib-size) * 0.34);
12}
13
14.dot-wave__dot {
15  flex-shrink: 0;
16  width: calc(var(--uib-size) * 0.17);
17  height: calc(var(--uib-size) * 0.17);
18  border-radius: 50%;
19  background-color: var(--uib-color);
20  will-change: transform;
21}
22
23.dot-wave__dot:nth-child(1) {
24  animation: jump824 var(--uib-speed) ease-in-out
25    calc(var(--uib-speed) * -0.45) infinite;
26}
27
28.dot-wave__dot:nth-child(2) {
29  animation: jump824 var(--uib-speed) ease-in-out
30    calc(var(--uib-speed) * -0.3) infinite;
31}
32
33.dot-wave__dot:nth-child(3) {
34  animation: jump824 var(--uib-speed) ease-in-out
35    calc(var(--uib-speed) * -0.15) infinite;
36}
37
38.dot-wave__dot:nth-child(4) {
39  animation: jump824 var(--uib-speed) ease-in-out infinite;
40}
41
42@keyframes jump824 {
43  0%,
44  100% {
45    transform: translateY(0px);
46  }
47
48  50% {
49    transform: translateY(-200%);
50  }
51}
52