Animated wizard progress

Here's a little demo for a two-step wizard. I've made it using SVG and CSS animation.

SVG consists of two paths:

• one that serves as a background and
• one that serves as a moving line.

The biggest challenge was to calculate the stroke-dasharray. I have used getTotalLength() function to get the overall length like in my previous demo. The length is 1640. Since I knew the middle line's length is 400, getting the length of the circle was quite straightforward:

circle = (overall - line) / 2
circle = (1640 - 400) / 2
circle = 620

The next step was to set the stroke-dashoffset. Again, I had to use a little bit of math:

offset = overall - circle
offset = 1640 - 620
offset = 1020

Finally, I have used the CSS Animation to make the animation:

.steps__path {
  stroke-dasharray: 1640;
  stroke-dashoffset: 1020;
  animation: line 5s ease-in-out infinite alternate-reverse;
}

@keyframes line {
  100% {
    stroke-dashoffset: -1020;
  }
}

I decided to set the animation-iteration-count to infinite and the animation-direction to alternate-reverse to make the loop animation.

I have used a modified version on my site, check it out.