1/* From uiverse.io by @JulioCodesSM */
2.loader {
3 width: 50px;
4 height: 50px;
5 position: relative;
6 transform: translateX(-25px);
7 /* Compensating for the left of 50px in the keyframe. */
8}
9
10.loader::before,
11.loader::after {
12 content: '';
13 position: absolute;
14 width: inherit;
15 height: inherit;
16 border-radius: 50%;
17 mix-blend-mode: multiply;
18 animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
19}
20
21.loader::before {
22 background-color: #fc3f9e;
23}
24
25.loader::after {
26 background-color: #50e8f3;
27 animation-delay: .5s;
28}
29
30@keyframes rotate9 {
31 0%,100% {
32  left: 50px;
33 }
34
35 25% {
36  transform: scale(.3);
37 }
38
39 50% {
40  left: 0;
41 }
42
43 75% {
44  transform: scale(1);
45 }
46}