SOURCE

<div class="left">
    <div class="leftcircle"></div>
</div>
<div class="right">
    <div class="rightcircle"></div>
</div>

.right{
    position: relative;
    width: 109px;
    height: 220px;
    overflow: hidden;
    background: black;
    float: left;
}

.rightcircle{
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    border: 10px solid transparent;
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-radius: 50%;
    /* transform: rotate(45deg); */
    transform: rotate(-135deg);
    animation: 3s circle_right linear infinite;
}

@keyframes circle_right {
    0%{
        transform: rotate(-135deg)
    }
    50%,100%{
        transform: rotate(45deg)
    }
}

.left{
    position: relative;
    width: 110px;
    height: 220px;
    overflow: hidden;
    background: black;
    float: left
}

.leftcircle{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    border: 10px solid transparent;
    border-bottom: 10px solid red;
    border-left: 10px solid red;
    border-radius: 50%;
    transform: rotate(-135deg);
    animation: left_right 3s linear infinite;
}

@keyframes left_right {
    0%, 50%{
        transform: rotate(-135deg)
    }
    100%{
        transform: rotate(45deg)
    }
}