.container {
    display: flex;
}

.left {
    width: 10px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.leftcircle {
    width: 20px;
    height: 20px;
    border: 4px solid rgba(114, 63, 254, 0.4);
    position: absolute;
    border-radius: 50%;
    left: 0px;
    top: 0px;
    border-bottom: 4px solid rgba(114, 63, 254, 1);
    border-left: 4px solid rgba(114, 63, 254, 1);
    transform: rotate(45deg);
    /* animation-name: circle_left;
    animation-duration: 30s;
    animation-delay: 0.5s;
    animation-timing-function: cubic-bezier(0.01, 0.99, 0.01, 0.99);
    animation-iteration-count: initial;
    animation-fill-mode: both; */
    transition: all 200ms linear;
}

.right {
    width: 10px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.rightcircle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid rgba(114, 63, 254, 0.4);
    position: absolute;
    border-top: 4px solid rgba(114, 63, 254, 1);
    border-right: 4px solid rgba(114, 63, 254, 1);
    right: 0px;
    top: 0px;
    transform: rotate(225deg);
    /* animation-name: circle_right;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: initial;
    animation-fill-mode: both; */
    transition: all 200ms linear;
}

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