1.three-body {
2 --uib-size: 35px;
3 --uib-speed: 0.8s;
4 --uib-color: #5D3FD3;
5 position: relative;
6 display: inline-block;
7 height: var(--uib-size);
8 width: var(--uib-size);
9 animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
10}
11
12.three-body__dot {
13 position: absolute;
14 height: 100%;
15 width: 30%;
16}
17
18.three-body__dot:after {
19 content: '';
20 position: absolute;
21 height: 0%;
22 width: 100%;
23 padding-bottom: 100%;
24 background-color: var(--uib-color);
25 border-radius: 50%;
26}
27
28.three-body__dot:nth-child(1) {
29 bottom: 5%;
30 left: 0;
31 transform: rotate(60deg);
32 transform-origin: 50% 85%;
33}
34
35.three-body__dot:nth-child(1)::after {
36 bottom: 0;
37 left: 0;
38 animation: wobble1 var(--uib-speed) infinite ease-in-out;
39 animation-delay: calc(var(--uib-speed) * -0.3);
40}
41
42.three-body__dot:nth-child(2) {
43 bottom: 5%;
44 right: 0;
45 transform: rotate(-60deg);
46 transform-origin: 50% 85%;
47}
48
49.three-body__dot:nth-child(2)::after {
50 bottom: 0;
51 left: 0;
52 animation: wobble1 var(--uib-speed) infinite
53    calc(var(--uib-speed) * -0.15) ease-in-out;
54}
55
56.three-body__dot:nth-child(3) {
57 bottom: -5%;
58 left: 0;
59 transform: translateX(116.666%);
60}
61
62.three-body__dot:nth-child(3)::after {
63 top: 0;
64 left: 0;
65 animation: wobble2 var(--uib-speed) infinite ease-in-out;
66}
67
68@keyframes spin78236 {
69 0% {
70  transform: rotate(0deg);
71 }
72
73 100% {
74  transform: rotate(360deg);
75 }
76}
77
78@keyframes wobble1 {
79 0%,
80  100% {
81  transform: translateY(0%) scale(1);
82  opacity: 1;
83 }
84
85 50% {
86  transform: translateY(-66%) scale(0.65);
87  opacity: 0.8;
88 }
89}
90
91@keyframes wobble2 {
92 0%,
93  100% {
94  transform: translateY(0%) scale(1);
95  opacity: 1;
96 }
97
98 50% {
99  transform: translateY(66%) scale(0.65);
100  opacity: 0.8;
101 }
102}
103