1.line-wobble {
2 --uib-size: 80px;
3 --uib-speed: 1.55s;
4 --uib-color: black;
5 --uib-line-weight: 5px;
6 position: relative;
7 display: flex;
8 align-items: center;
9 justify-content: center;
10 height: var(--uib-line-weight);
11 width: var(--uib-size);
12 border-radius: calc(var(--uib-line-weight) / 2);
13 overflow: hidden;
14 transform: translate3d(0, 0, 0);
15}
16
17.line-wobble::before {
18 content: '';
19 position: absolute;
20 top: 0;
21 left: 0;
22 height: 100%;
23 width: 100%;
24 background-color: var(--uib-color);
25 opacity: 0.1;
26}
27
28.line-wobble::after {
29 content: '';
30 height: 100%;
31 width: 100%;
32 border-radius: calc(var(--uib-line-weight) / 2);
33 animation: wobble var(--uib-speed) ease-in-out infinite;
34 transform: translateX(-90%);
35 background-color: var(--uib-color);
36}
37
38@keyframes wobble {
39 0%,
40  100% {
41  transform: translateX(-90%);
42 }
43
44 50% {
45  transform: translateX(90%);
46 }
47}
48