*{
    padding:0;
    margin:0;
}

body {
    background:black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

body >div {
    position:absolute;
}


.box_1 {
    width:100px;
    height: 100px;
    border:30px solid transparent;
    border-top:30px solid aqua;
    border-bottom:30px solid aqua;
    border-radius: 50%;
    animation: ani 3s linear infinite;
    animation-direction: reverse;

}



.box_2 {
    width:200px;
    height: 200px;
    border:30px solid transparent;
    border-left:30px solid aqua;
    border-right:30px solid aqua;
    border-radius: 50%;
    animation: ani 3s linear infinite;
}



.box_3 {
    width:300px;
    height: 300px;
    border:30px solid transparent;
    border-top:30px solid aqua;
    border-bottom:30px solid aqua;
    border-radius: 50%;
    animation: ani 3s linear infinite;
    animation-direction: reverse;
    
}

.box_4 {
    width:400px;
    height: 400px;
    border:30px solid transparent;
    border-left:30px solid aqua;
    border-right:30px solid aqua;
    border-radius: 50%;
    animation: ani 3s linear infinite;
    
}



@keyframes ani {

    
    0%{
        transform:rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}