创建一个加载器，其中以圆圈为中心的线

Question

这是我的代码

＆＃13;

＆＃13;

.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%;
    }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想设计一个有七条线的装载机。

在页面加载时，我想要第一行，即底线从右移动并停在中心直到第二行到达，当第二行来到中心时，现在第一行和第二行将等待第三行和这将继续下去，直到所有线都到位。

现在当所有的线都到达中心然后它们形成圆形格式一段时间然后第一条线，即底线将从中心向左侧移动，然后是第二条线，然后在其他线之后移动。

此过程将继续进行无限循环。

Answer 1

首先，我建议仅使用一个元素来创建加载器，然后依靠linear-gradient来创建每一行。对于动画，我们只需要调整每个background-size;因此我们只需要一个动画。

您必须修复每行的background-position然后为每个动画状态逐个更改行的背景大小。所以对于第一个状态，所有它们都在[0% 10px]（宽度/高度），然后在下一步中最后一个变为[50% 10px]，然后我们改变第二个，然后改变一个。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<div class="circle">

</div>

＆＃13;

＆＃13;

＆＃13;