.loader{
    width: 200px;
    height: 100px;
    margin: 30px auto;
    overflow: hidden;
}

.loader .loader-inner{
    width: 150px;
    height: 4px;
    background: #264080;
    border-radius: 2px;
    margin: 70px auto 0;
    position: relative;
    animation: loading-1 1.5s infinite ease-in-out;
}

.loader .loader-inner:after{
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 5px dotted #c58e5e;
    position: absolute;
    top: -50px;
    animation: loading-2 1.5s infinite ease-in-out;
}

@keyframes loading-1{
    0%, 100%{
        transform: rotate(0);
    }
    30%{
        transform: rotate(10deg);
    }
    66%{
        transform: rotate(-10deg);
    }
}

@keyframes loading-2{
    0%, 100%{
        transform: translate(-10px, 0) rotate(0);
    }
    50%{
        transform: translate(100px, 0) rotate(180deg);
    }
}