Анимированная линия, которая постепенно меняет цвет

#javascript #svg #анимация

Какими средствами анимировать линию по типу progress bar проще всего? 

Я пошел по пути svg, но не уверен что это разумное решение для данного случая. Может
на css лучше делать?





$(document).ready(function () {
  // SVG animate
    var s = Snap("#svg1");

    var line = s.path("M 0 0 L 360 0");
    var line_hover = s.path("M 0 0 L 0 0");

    line_hover.attr({
        fill: "transparent",
        stroke: "#4054b2",
        strokeWidth: 5
    });

    line.attr({
        fill: "#000",
        stroke: "rgba(0, 0, 0, 0.1)",
        strokeWidth: 5
    });
    line_hover.animate({d: "L 360 0"}, 3000);

    var s2 = Snap("#svg2");

    var line2 = s2.path("M 0 0 L 360 0");
    var line2_hover = s2.path("M 0 0 L 0 0");

    line2_hover.attr({
        fill: "transparent",
        stroke: "#4054b2",
        strokeWidth: 5
    });

    line2.attr({
        fill: "#000",
        stroke: "rgba(0, 0, 0, 0.1)",
        strokeWidth: 5
    });
    line2_hover.animate({d: "L 360 0"}, 6000);
});
.connection__wrap {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}
.connection__content{
        display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 90px 0;
}
.connection__content-item {
    text-align: center;
    width: 300px;
}
.connection__content-item-img {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 144px;
    height: 144px;
    margin: 0 auto 26px;
    position: relative;
        border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
}
.connection__content-item-img.pink {
    background: -webkit-gradient(linear,right top,left top,from(#F64A89),to(#D81B60));
    background: linear-gradient(to left,#F64A89,#D81B60);
    -webkit-box-shadow: 0 0 20px rgba(216,27,96,.5);
    box-shadow: 0 0 20px rgba(216,27,96,.5);
}
.connection__content-item-img.orange {
    background: -webkit-gradient(linear,right top,left top,from(#FE8D69),to(#F4511E));
    background: linear-gradient(to left,#FE8D69,#F4511E);
    -webkit-box-shadow: 0 0 20px rgba(244,81,30,.5);
    box-shadow: 0 0 20px rgba(244,81,30,.5);
}
.connection__content-item-img.red {
    background: -webkit-gradient(linear,right top,left top,from(#F76763),to(#E53935));
    background: linear-gradient(to left,#F76763,#E53935);
    -webkit-box-shadow: 0 0 20px rgba(229,57,53,.5);
    box-shadow: 0 0 20px rgba(229,57,53,.5);
}
.svg{
  top: 50%;
  position: absolute;
  width: 360px;
  height: 10px;
  left: 170px;
}
#svg1{
  width: 360px;
  height: 10px;
  margin: 0 auto;
}
#svg2{
  width: 360px;
  height: 10px;
  margin: 0 auto;
}

button{
  padding: 15px;
}



  
Заголовок
  

    

      

        

          
        
      
      

        
Текст
      
    
    

      

        

          
        
      
      

        
Текст
      
    
    

      

      

        
Текст
      
    
  
  




    

Ответы

Ответ 1

Делаем один path, прокладываем под элементами:



let s = Snap("#svg1");
let line = s.path("M 0 0 L 970 0");
let line_hover = s.path("M 0 0 L 0 0");

line_hover.attr({
  fill: "transparent",
  stroke: "#4054b2",
  strokeWidth: 5
});

line.attr({
  fill: "none",
  stroke: "rgba(0, 0, 0, 0.1)",
  strokeWidth: 5
});

line_hover.animate({
  d: "L 970 0"
}, 8000);
.connection__wrap {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}

.connection__content {
  position: relative;
  display: flex;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 90px 0;
}

.connection__content-item {
  text-align: center;
  width: 300px;
}

.connection__content-item-img {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 144px;
  height: 144px;
  margin: 0 auto 26px;
  position: relative;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
}

.connection__content-item-img.pink {
  background: -webkit-gradient( linear, right top, left top, from(#f64a89), to(#d81b60));
  background: linear-gradient(to left, #f64a89, #d81b60);
  -webkit-box-shadow: 0 0 20px rgba(216, 27, 96, 0.5);
  box-shadow: 0 0 20px rgba(216, 27, 96, 0.5), 0 0 0 15px #fff;
}

.connection__content-item-img.orange {
  background: -webkit-gradient( linear, right top, left top, from(#fe8d69), to(#f4511e));
  background: linear-gradient(to left, #fe8d69, #f4511e);
  -webkit-box-shadow: 0 0 20px rgba(244, 81, 30, 0.5);
  box-shadow: 0 0 20px rgba(244, 81, 30, 0.5), 0 0 0 15px #fff;
}

.connection__content-item-img.red {
  background: -webkit-gradient( linear, right top, left top, from(#f76763), to(#e53935));
  background: linear-gradient(to left, #f76763, #e53935);
  -webkit-box-shadow: 0 0 20px rgba(229, 57, 53, 0.5);
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.5), 0 0 0 15px #fff;
}

.svg {
  top: 45%;
  position: absolute;
  left: 170px;
  transform: translateY(-50%);
  z-index: -1;
}

#svg1 {
  width: 970px;
  height: 10px;
}

button {
  padding: 15px;
}


  
Заголовок
  

    

      

      
      

        
Текст
      
    
    

      

      
      

        
Текст
      
    
    

      

      

        
Текст
      
    
    

      
    
  
  



Ответ 2

Что то у меня мозгов не хватает как сделать что бы это полоска не пропадала , но
может быть сообщество ru.stackoverflow.com поможет доработать этот пример 



.items {
  height: 300px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.item {
  width: 150px;
  height: 150px;
  background: blue;
  position: relative;
  z-index: 10;
  border: 20px solid #fff;
  animation: scaler 12s cubic-bezier(0, 1.29, 1, -1.05) infinite;
}

.item:nth-of-type(1) {
  animation-duration: 4s;
}

.item:nth-of-type(2) {
  animation-duration: 12s;
}

.item:nth-of-type(3) {
  animation-duration: 4s;
}

.item-line {
  width: 100%;
  height: 20px;
  position: absolute;
}

.dotted {
  width: 20px;
  height: 20px;
  background: red;
  animation: colorize 12s cubic-bezier(0, 1.29, 1, -1.05) infinite;
}

@keyframes colorize {
  21% {
    width: 10%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 80%;
  }
  40% {
    width: 100%;
  }
}

@keyframes scaler {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


  

  

  


  

    

  




Ответ 3

Вот что у меня получилось, по крайней мере разобрался с анимацией линий. Все дело
в циклах ;)



$(document).ready(function () {
  // SVG animate
    var s = Snap("#svg1");

    var linePos = [
            {
                m1: 0,
                m2: 0,
                l1: 0,
                l2: 0,
                dm1: 0,
                dm2: 0,
                dl1: 360,
                dl2: 0,
                delay: 800,
                timeout: 0
            },
            {
                m1: 556,
                m2: 0,
                l1: 556,
                l2: 0,
                dm1: 556,
                dm2: 0,
                dl1: 916,
                dl2: 0,
                delay: 800,
                timeout: 800
            },
            {
                m1: 1110,
                m2: 0,
                l1: 1110,
                l2: 0,
                dm1: 1110,
                dm2: 0,
                dl1: 1180,
                dl2: 0,
                delay: 300,
                timeout: 1600
            },
            {
                m1: 1180,
                m2: 0,
                l1: 1180,
                l2: 0,
                dm1: 1180,
                dm2: 0,
                dl1: 1180,
                dl2: 260,
                delay: 500,
                timeout: 1900
            },
            {
                m1: 1180,
                m2: 260,
                l1: 1180,
                l2: 260,
                dm1: 1180,
                dm2: 260,
                dl1: 628,
                dl2: 260,
                delay: 1000,
                timeout: 2400
            }
        ];

    var i = 0;
    
    linePos.forEach(function(value, currentIndex) {
                setTimeout(function() {
                    createLineAnimate(currentIndex);
                    i++;
                }, linePos[currentIndex].timeout);
            });

    function createLineAnimate(i) {
        s.path("M " + linePos[i].m1 + " " + linePos[i].m2 + " L " + linePos[i].l1
+ " " + linePos[i].l2 )
            .attr({
                fill: "transparent",
                stroke: "#827ee9",
                strokeWidth: 5
            })
            .animate({d: "M " + linePos[i].dm1 + " " + linePos[i].dm2 + " L " + linePos[i].dl1
+ " " + linePos[i].dl2}, linePos[i].delay);
    }
    
    
});
.connection__wrap {
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}
.connection__content{
        display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 90px 0;
}
.connection__content-item {
    text-align: center;
    width: 300px;
}
.connection__content-item-img {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 144px;
    height: 144px;
    margin: 0 auto 26px;
    position: relative;
        border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
}
.connection__content-item-img.pink {
    background: -webkit-gradient(linear,right top,left top,from(#F64A89),to(#D81B60));
    background: linear-gradient(to left,#F64A89,#D81B60);
    -webkit-box-shadow: 0 0 20px rgba(216,27,96,.5);
    box-shadow: 0 0 20px rgba(216,27,96,.5);
}
.connection__content-item-img.orange {
    background: -webkit-gradient(linear,right top,left top,from(#FE8D69),to(#F4511E));
    background: linear-gradient(to left,#FE8D69,#F4511E);
    -webkit-box-shadow: 0 0 20px rgba(244,81,30,.5);
    box-shadow: 0 0 20px rgba(244,81,30,.5);
}
.connection__content-item-img.red {
    background: -webkit-gradient(linear,right top,left top,from(#F76763),to(#E53935));
    background: linear-gradient(to left,#F76763,#E53935);
    -webkit-box-shadow: 0 0 20px rgba(229,57,53,.5);
    box-shadow: 0 0 20px rgba(229,57,53,.5);
}
.svg{
  position: absolute;
  top: 50%;
  width: 1180px;
  height: 260px;
  left: 170px;
}
#svg1{
  width: 1180px;
  height: 260px;
  margin: 0 auto;
}
button{
  padding: 15px;
}



  
Заголовок
  

    

      

        

          
        
      
      

        
Текст
      
    
    

      

      
      

        
Текст
      
    
    

      

      

        
Текст