Yükleyici 9 - Infinity

/* From uiverse.io by @usmonovdev */
.spinner9 {
position: relative;
width: 56px;
height: 56px;
}

.spinner9 > div {
width: 100%;
height: 100%;
border-radius: 50%;
border: 13px solid rgba(181, 126, 16, 0.196);
position: absolute;
top: 0;
left: 0;
animation: spinner-g7vlvwmd 0.65s linear infinite;
z-index: 0;
}

.spinner9 > div::before {
content: '';
height: 13px;
width: 13px;
border-radius: 50%;
background: #ff8a23;
position: absolute;
top: 50%;
animation: spinner-h1vps1md 1.3s infinite reverse steps(1);
transform: translate(calc(2 * var(--translate-2)), calc(var(--translate) * 1%));
z-index: 1;
}

.spinner9 > div:nth-of-type(1) {
--translate: -50;
--translate-2: calc(56px / 8);
}

.spinner9 > div:nth-of-type(1)::before {
right: 0;
}

.spinner9 > div:nth-of-type(2) {
--translate: 50;
--translate-2: calc(-56px / 8);
animation-delay: 0.65s;
animation-direction: reverse;
transform: translate(21.5px, 0);
}

.spinner9 > div:nth-of-type(2)::before {
left: 0;
transform: translate(calc(-56px / 4), -50%);
animation-direction: normal;
}

@keyframes spinner-h1vps1md {
0% {
opacity: 0;
}

50% {
opacity: 1;
}
}

@keyframes spinner-g7vlvwmd {
from {
transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(0deg);
}

to {
transform: translate(calc(var(--translate) * 1%), 0) translate(calc(var(--translate-2)), 0) rotate(360deg);
}
}