1.chaotic-orbit {
2 --uib-size: 25px;
3 --uib-speed: 1.5s;
4 --uib-color: black;
5 position: relative;
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 height: var(--uib-size);
10 width: var(--uib-size);
11 animation: rotate936 calc(var(--uib-speed) * 1.667) infinite linear;
12}
13
14.chaotic-orbit::before,
15.chaotic-orbit::after {
16 content: '';
17 position: absolute;
18 height: 60%;
19 width: 60%;
20 border-radius: 50%;
21 background-color: var(--uib-color);
22 will-change: transform;
23 flex-shrink: 0;
24}
25
26.chaotic-orbit::before {
27 animation: orbit var(--uib-speed) linear infinite;
28}
29
30.chaotic-orbit::after {
31 animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2)
32    infinite;
33}
34
35@keyframes rotate936 {
36 0% {
37  transform: rotate(0deg);
38 }
39
40 100% {
41  transform: rotate(360deg);
42 }
43}
44
45@keyframes orbit {
46 0% {
47  transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
48  opacity: 0.65;
49 }
50
51 5% {
52  transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);
53  opacity: 0.58;
54 }
55
56 10% {
57  transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);
58  opacity: 0.51;
59 }
60
61 15% {
62  transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);
63  opacity: 0.44;
64 }
65
66 20% {
67  transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);
68  opacity: 0.37;
69 }
70
71 25% {
72  transform: translate(0%) scale(0.47368);
73  opacity: 0.3;
74 }
75
76 30% {
77  transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);
78  opacity: 0.37;
79 }
80
81 35% {
82  transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);
83  opacity: 0.44;
84 }
85
86 40% {
87  transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);
88  opacity: 0.51;
89 }
90
91 45% {
92  transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);
93  opacity: 0.58;
94 }
95
96 50% {
97  transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);
98  opacity: 0.65;
99 }
100
101 55% {
102  transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);
103  opacity: 0.72;
104 }
105
106 60% {
107  transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);
108  opacity: 0.79;
109 }
110
111 65% {
112  transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);
113  opacity: 0.86;
114 }
115
116 70% {
117  transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);
118  opacity: 0.93;
119 }
120
121 75% {
122  transform: translate(0%) scale(1);
123  opacity: 1;
124 }
125
126 80% {
127  transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);
128  opacity: 0.93;
129 }
130
131 85% {
132  transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);
133  opacity: 0.86;
134 }
135
136 90% {
137  transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);
138  opacity: 0.79;
139 }
140
141 95% {
142  transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);
143  opacity: 0.72;
144 }
145
146 100% {
147  transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
148  opacity: 0.65;
149 }
150}
151
152