Creating a loader in which lines making a circle at center

问题

Here is my code

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

I want to design a loader in which there are seven lines.

On page load, I want that the first line i.e. the bottom line move from right and stops at the center until second line came and when second line came at the center, now both first and second line will wait for third line and this will continue until all lines come to center.

Now when all the lines came to center then they form circular format for some time and then the first line i.e. the bottom line will move from center to left side then the second line and then after the further lines.

This process will continue for infinite loop.

回答1:

First, I would suggest using only one element to create the loader then rely on linear-gradient to create each line. For the animation we simply need to adjust the background-size of each one; thus we need only one animation.

You have to fix the background-position of each line then for each animation state you change the background-size of the lines one by one. So for the first state all them are at [0% 10px] (width/height) then in the next step the last one become [50% 10px], then we change the second one and so one.

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

来源：https://stackoverflow.com/questions/50241155/creating-a-loader-in-which-lines-making-a-circle-at-center