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.