.loader {
    width: 47px;
    height: 47px;
    position: relative;
}

    .loader:before,
    .loader:after {
        content: "";
        display: block;
        border: 24px solid;
        border-color: transparent transparent #e67e22 #e67e22;
        position: absolute;
        left: 0;
        top: 0;
        animation: mvx 1.2s infinite ease-in;
    }

    .loader:before {
        border-color: #e67e22 #e67e22 transparent transparent;
        animation-name: mvrx;
    }

@keyframes mvx {
    0%, 10% {
        transform: translate(0, 0) rotate(0deg)
    }

    30% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg)
    }

    75%, 100% {
        transform: translate(0, 0) rotate(180deg)
    }
}

@keyframes mvrx {
    0%, 10% {
        transform: translate(0, 0) rotate(0deg)
    }

    30% {
        transform: translate(50%, 50%) rotate(0deg)
    }

    50% {
        transform: translate(50%, 50%) rotate(180deg)
    }

    75%, 100% {
        transform: translate(0, 0) rotate(180deg)
    }
}