What i am trying to build is a vertical timeline component with some animation. The animation which am trying is that it starts from the first circle, whichever item has status true the vertical line will draw from top to bottom meanwhile whichever steps gets completed will change from round circle to completed checkmark when the line crosses it.

How can I achieve the above animation on this, I have tried so far but didn't know how to achieve the above.

What am i trying to achieve this

sandbox

Any help is appreciated.

CodePudding user response：

It's possible to animate a background. Please check the example below

.bg {
  min-height: 300px;
  width: 10px;
  background: linear-gradient(0, red, red) no-repeat;
  background-size: 100% 0;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-size: 100% 0;
    }
    100% {
        background-size: 100% 100%;
    }
}

<div class="bg"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Your TimelineConnector could be updated with include of that CSS class.

CodePudding user response：

You can put a green line above grey line with 0% height and make it grow to 100% with an animation. Then with a bit of javaScript (jQuery) you can start the animation adding a class to that line. Same with the green circle (in this case delaying adding a class to the circle to change aspect same time as you set in the animation.)

like this:

$('button').click(function(){
    $('.line2').addClass("animation");
    setTimeout(
    function() 
    {
      $('.circle').addClass("circlegreen");
    }, 1500);
});

.circle {
  height:30px;
  width:30px;
  border-radius:50%;
  border:8px solid #ddd;
}
.line {
  height:90px;
  width:8px;
  background-color:#ddd;
  margin-left:19px;
  position:relative;
}

.circlegreen {
  background-color:green;
  border:8px solid green;
}
.animation {
  animation-name:timeline;
  animation-duration:1.5s;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
  animation-timing-function:linear;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0%;
  background-color:green;
}
@keyframes timeline {
  from {height:0%;}
  to {height:100%;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click</button>
<div class="circle circlegreen"></div>
<div class="line">
  <div class="line2"></div>
</div>
<div class="circle"></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I have added a button to start animation.