.loader {
    margin: 10rem;
}
.loader > div {
    -webkit-animation: 0.8s  rotate  linear  forwards  infinite;
    animation: 0.8s  rotate  linear  forwards  infinite;
    position: relative;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
.loader > div > div {
    height: 100px;
    width: 100px;
    border-radius: 52px;
    position: absolute;
    top: calc(50% - 52px);
    right: -100%;
    left: -100%;
    margin: 0 auto;
    mix-blend-mode: screen;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    border-width: 2px;
    border-style: solid;
}
.loader > div > div:nth-child(1) {
    -webkit-transform: rotate(60deg) scale(1) translateY(0rem);
    -ms-transform: rotate(60deg) scale(1) translateY(0rem);
    transform: rotate(60deg) scale(1) translateY(0rem);
    border-color: #ddff33;
    -webkit-animation: 1.8s flying1 0s forwards infinite;
    animation: 1.8s flying1 0s forwards infinite;
}
.loader > div > div:nth-child(2) {
    -webkit-transform: rotate(120deg) scale(1) translateY(0rem);
    -ms-transform: rotate(120deg) scale(1) translateY(0rem);
    transform: rotate(120deg) scale(1) translateY(0rem);
    border-color: #33ff55;
    -webkit-animation: 1.8s flying2 0.1s forwards infinite;
    animation: 1.8s flying2 0.1s forwards infinite;
}
.loader > div > div:nth-child(3) {
    -webkit-transform: rotate(180deg) scale(1) translateY(0rem);
    -ms-transform: rotate(180deg) scale(1) translateY(0rem);
    transform: rotate(180deg) scale(1) translateY(0rem);
    border-color: #33ddff;
    -webkit-animation: 1.8s flying3 0.2s forwards infinite;
    animation: 1.8s flying3 0.2s forwards infinite;
}
.loader > div > div:nth-child(4) {
    -webkit-transform: rotate(240deg) scale(1) translateY(0rem);
    -ms-transform: rotate(240deg) scale(1) translateY(0rem);
    transform: rotate(240deg) scale(1) translateY(0rem);
    border-color: #5533ff;
    -webkit-animation: 1.8s flying4 0.3s forwards infinite;
    animation: 1.8s flying4 0.3s forwards infinite;
}
.loader > div > div:nth-child(5) {
    -webkit-transform: rotate(300deg) scale(1) translateY(0rem);
    -ms-transform: rotate(300deg) scale(1) translateY(0rem);
    transform: rotate(300deg) scale(1) translateY(0rem);
    border-color: #ff33dd;
    -webkit-animation: 1.8s flying5 0.4s forwards infinite;
    animation: 1.8s flying5 0.4s forwards infinite;
}
.loader > div > div:nth-child(6) {
    -webkit-transform: rotate(360deg) scale(1) translateY(0rem);
    -ms-transform: rotate(360deg) scale(1) translateY(0rem);
    transform: rotate(360deg) scale(1) translateY(0rem);
    border-color: #ff5533;
    -webkit-animation: 1.8s flying6 0.5s forwards infinite;
    animation: 1.8s flying6 0.5s forwards infinite;
}

@-webkit-keyframes flying1 {
    0% {
        width: 100px;
        -webkit-transform: rotate(60deg) scale(1) translateY(0rem);
        transform: rotate(60deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(60deg) scale(1.5) translateY(0.2rem);
        transform: rotate(60deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(60deg) scale(1) translateY(0rem);
        transform: rotate(60deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}

@keyframes flying1 {
    0% {
        width: 100px;
        -webkit-transform: rotate(60deg) scale(1) translateY(0rem);
        transform: rotate(60deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(60deg) scale(1.5) translateY(0.2rem);
        transform: rotate(60deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(60deg) scale(1) translateY(0rem);
        transform: rotate(60deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@-webkit-keyframes flying2 {
    0% {
        width: 100px;
        -webkit-transform: rotate(120deg) scale(1) translateY(0rem);
        transform: rotate(120deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(120deg) scale(1.5) translateY(0.2rem);
        transform: rotate(120deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(120deg) scale(1) translateY(0rem);
        transform: rotate(120deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@keyframes flying2 {
    0% {
        width: 100px;
        -webkit-transform: rotate(120deg) scale(1) translateY(0rem);
        transform: rotate(120deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(120deg) scale(1.5) translateY(0.2rem);
        transform: rotate(120deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(120deg) scale(1) translateY(0rem);
        transform: rotate(120deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@-webkit-keyframes flying3 {
    0% {
        width: 100px;
        -webkit-transform: rotate(180deg) scale(1) translateY(0rem);
        transform: rotate(180deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(180deg) scale(1.5) translateY(0.2rem);
        transform: rotate(180deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(180deg) scale(1) translateY(0rem);
        transform: rotate(180deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@keyframes flying3 {
    0% {
        width: 100px;
        -webkit-transform: rotate(180deg) scale(1) translateY(0rem);
        transform: rotate(180deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(180deg) scale(1.5) translateY(0.2rem);
        transform: rotate(180deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(180deg) scale(1) translateY(0rem);
        transform: rotate(180deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@-webkit-keyframes flying4 {
    0% {
        width: 100px;
        -webkit-transform: rotate(240deg) scale(1) translateY(0rem);
        transform: rotate(240deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(240deg) scale(1.5) translateY(0.2rem);
        transform: rotate(240deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(240deg) scale(1) translateY(0rem);
        transform: rotate(240deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@keyframes flying4 {
    0% {
        width: 100px;
        -webkit-transform: rotate(240deg) scale(1) translateY(0rem);
        transform: rotate(240deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(240deg) scale(1.5) translateY(0.2rem);
        transform: rotate(240deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(240deg) scale(1) translateY(0rem);
        transform: rotate(240deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@-webkit-keyframes flying5 {
    0% {
        width: 100px;
        -webkit-transform: rotate(300deg) scale(1) translateY(0rem);
        transform: rotate(300deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(300deg) scale(1.5) translateY(0.2rem);
        transform: rotate(300deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(300deg) scale(1) translateY(0rem);
        transform: rotate(300deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@keyframes flying5 {
    0% {
        width: 100px;
        -webkit-transform: rotate(300deg) scale(1) translateY(0rem);
        transform: rotate(300deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(300deg) scale(1.5) translateY(0.2rem);
        transform: rotate(300deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(300deg) scale(1) translateY(0rem);
        transform: rotate(300deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@-webkit-keyframes flying6 {
    0% {
        width: 100px;
        -webkit-transform: rotate(360deg) scale(1) translateY(0rem);
        transform: rotate(360deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(360deg) scale(1.5) translateY(0.2rem);
        transform: rotate(360deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(360deg) scale(1) translateY(0rem);
        transform: rotate(360deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@keyframes flying6 {
    0% {
        width: 100px;
        -webkit-transform: rotate(360deg) scale(1) translateY(0rem);
        transform: rotate(360deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
    25% {
        width: 120px;
        -webkit-transform: rotate(360deg) scale(1.5) translateY(0.2rem);
        transform: rotate(360deg) scale(1.5) translateY(0.2rem);
        border-width: 5px;
    }
    50% {
        width: 100px;
        -webkit-transform: rotate(360deg) scale(1) translateY(0rem);
        transform: rotate(360deg) scale(1) translateY(0rem);
        border-width: 2px;
    }
}
@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}