Yükleyici 10

.loader10 {
width: 50px;
height: 50px;
position: relative;
transform: translateX(-25px);
/* Compensating for the left of 50px in the keyframe. */
}

.loader10::before,
.loader10::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
mix-blend-mode: multiply;
animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.loader10::before {
background-color: #fc3f9e;
}

.loader10::after {
background-color: #50e8f3;
animation-delay: .5s;
}

@keyframes rotate9 {
0%,100% {
left: 50px;
}

25% {
transform: scale(.3);
}

50% {
left: 0;
}

75% {
transform: scale(1);
}
}