创建一个加载器，其中线在中心形成一个圆

.circle {
  border: 1px solid transparent;
  border-radius: 50%;
  width: 100px;
  overflow: hidden;

}
.div7 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
}
.div6 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div1 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div2 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div3 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div4 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}
.div5 {
    width: 100px;
    height: 10px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    animation: mymove 6s infinite ;
    margin-top:5px;
}



#div7 {animation-timing-function: cubic-bezier(0.6,0,1,1);}
#div6 {animation-timing-function: cubic-bezier(0.5,0,1,1);}
#div1 {animation-timing-function: cubic-bezier(0.4,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.3,0,1,1);}
#div3 {animation-timing-function: cubic-bezier(0.2,0,0.58,1);}
#div4 {animation-timing-function: cubic-bezier(0.1,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0,1,1,1);}

@keyframes mymove {
     0%{
        opacity: 0;
        left: 80%;      
    }
    50%{
        opacity: 1;
        left: 45%;

    }
    100%{
        opacity: 0;
        left: 10%;
    }
}

<div class="circle">
  <div id="div7" class="div7"></div>
  <div id="div6" class="div6"></div>
  <div id="div1" class="div1"></div>
  <div id="div2" class="div2"></div>
  <div id="div3" class="div3"></div>
  <div id="div4" class="div4"></div>
  <div id="div5" class="div5"></div>
</div>

.circle {
  border: 1px solid transparent;
  border-radius: 50%;
  width: 82px;
  height:82px;
  overflow: hidden;
  background-image:
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red),
  linear-gradient(red,red);
  background-size:0% 10px;
  background-position:100% 0, 100% 12px,100% 24px,100% 36px,100% 48px,100% 60px,100% 72px;
  background-repeat:no-repeat;
  animation:animate 6s infinite cubic-bezier(0.6,0,1,1);;
}
@keyframes animate{
  0% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,0% 10px;
  }
  10% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,50% 10px;
  }
  15% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,0% 10px,50% 10px,50% 10px;
  }
  20% {
    background-size:0% 10px,0% 10px,0% 10px,0% 10px,50% 10px,50% 10px,50% 10px;
  }
  25% {
    background-size:0% 10px,0% 10px,0% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  30% {
    background-size:0% 10px,0% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  35% {
    background-size:0% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  40% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  45% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px;
  }
  50% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,100% 10px;
  }
  55% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,50% 10px,100% 10px,100% 10px;
  }
  60% {
    background-size:50% 10px,50% 10px,50% 10px,50% 10px,100% 10px,100% 10px,100% 10px;
  }
  65% {
    background-size:50% 10px,50% 10px,50% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  70% {
    background-size:50% 10px,50% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  75% {
    background-size:50% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  80% {
    background-size:100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
  }
  100% {
    background-size:100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px,100% 10px;
    opacity:0;
  }
}

<div class="circle">

</div>