Yükleyici 16

.momentum16 {
--uib-size: 40px;
--uib-speed: 1s;
--uib-color: rgb(0, 0, 0);
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: var(--uib-size);
width: var(--uib-size);
animation: rotate01561 var(--uib-speed) linear infinite;
}

.momentum16::before,
.momentum16::after {
content: '';
height: 25%;
width: 25%;
border-radius: 50%;
background-color: var(--uib-color);
}

.momentum16::before {
animation: wobble290123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.momentum16::after {
animation: wobble9123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
}

.momentum16::before {
margin-right: 10%;
}

@keyframes wobble9123 {
0%,
100% {
transform: translateX(0);
}

50% {
transform: translateX(calc(var(--uib-size) * 0.2)) scale(1.1);
}
}

@keyframes wobble290123 {
0%,
100% {
transform: translateX(0);
}

50% {
transform: translateX(calc(var(--uib-size) * -0.2)) scale(1.1);
}
}

@keyframes rotate01561 {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}