progress bar circle 무한대로 돌리기 (CSS)

 

    &.mic-process {
                &:before {
                    position: absolute;
                    left: -12px;
                    bottom: -12px;
                    border-radius: 100px;
                    -webkit-transition: all 0.5s ease-in;
                    -webkit-animation-name: rotate;
                    -webkit-animation-duration: 1s;
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-timing-function: linear;
                    transition: all 0.5s ease-in;
                    animation-name: rotate;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                    content: url('~@/assets/img/mic-line.png'); // 돌릴 바 형태 이미지로 제작
                }
            }

요래 됨 

gif 캡쳐 귀찮아서 발캡쳐 ~