body{
    background: #111;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.bg{
    width: 160px;
    height: 160px;
    background: #824b20;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    animation: anim 2s;
    animation-iteration-count:infinite ;
}
.c{
    position: relative;
    width:100%;
    height: 100%;
    background: #e08027;
    border-radius: 50%;
}
.r1{
    background: #fff58f;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translateX(-50px);
}
.r2{
    background: #fff58f;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translateX(50px);
}
.line{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: transparent;
    position: absolute;
    border: 20px solid transparent;
    border-bottom-color:#fff58f;
    border-right-color:#fff58f;
    transform: rotate(45deg);
}
@keyframes anim{
    0%{
        transform: rotate(0deg) scale(1);
    }
    25%{
        transform: rotate(180deg) scale(1.3);
    }
    50%{
        transform: rotate(360deg) scale(1.3);
    }
    100%{
        transform: rotate(360deg) scale(1);
    }
}