Создание загрузчика, в котором линии делают круг в центре - PullRequest
Новая
       5

Создание загрузчика, в котором линии делают круг в центре

0 голосов
/ 08 мая 2018

Вот мой код 

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

Я хочу создать загрузчик, в котором будет семь линий.

При загрузке страницы я хочу, чтобы первая строка, т. Е. Нижняя строка, двигалась справа и остановилась в центре, пока не пришла вторая строка, а когда вторая строка пришла в центр, теперь и первая, и вторая строки будут ждатьтретья строка, и это будет продолжаться до тех пор, пока все линии не придут к центру.

Теперь, когда все линии пришли к центру, они некоторое время образуют круговой формат, а затем первая строка, т.е. нижняя линия будет перемещаться из центра влевосторона затем вторая строка, а затем после дальнейших строк.

Этот процесс будет продолжаться для бесконечного цикла.

1 Ответ

0 голосов
/ 08 мая 2018

Во-первых, я бы предложил использовать только один элемент для создания загрузчика, затем положитесь на linear-gradient для создания каждой строки. Для анимации нам просто нужно настроить background-size каждого; таким образом, нам нужна только одна анимация.

Вы должны исправить background-position каждой строки, затем для каждого состояния анимации вы меняете размер фона линий по одной. Таким образом, для первого состояния все они находятся на [0% 10px] (ширина / высота), затем на следующем шаге последний становится [50% 10px], затем мы меняем второе и так далее. 

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