Building a animated step progress bar — Animation with JavaScript (Part 2)

This article is a continuation of my previous article here Building a step progress bar — CSS.

Animated Progress Bar with Steps/Milestones

In this article we would discuss how we can extend the progress bar that we built in previous article to have animation. We would be adding the following two behaviors to our step progress bar:

  • Progress bar getting filled slowly
  • Initially the step circle appears in grey. During animation when the progress reaches or crosses a particular step circle, change its color to green.
CSS for this article is going to be the same as the previous article. You can find the css here.

We will have to make some changes to HTML to make the progress bar animated

HTML for the progress bar
<div class="example">
<div class="progress">
<div class="progress__container">
<div class="progress__bar" data-width="80">
<div class="step step--first" data-position="0">
<div class="step__content">
<div class="step__title">
Step 1
<span class="step__title--status-icon step__title--status-icon--first">1</span>
</div>
</div>
</div>

<div class="step" style="left: 50%" data-position="50">
<div class="step__content">
<div class="step__title">
Step 2
<span class="step__title--status-icon">2</span>
</div>
</div>
</div>

<div class="step step--last" data-position="100">
<div class="step__content">
<div class="step__title">
Step 3
<span class="step__title--status-icon step__title--status-icon--last">3</span>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

If you compare this HTML with the one mentioned in the previous article, you would notice the following changes:

  • Instead of hard coding the width on progress__bar, we are adding a data-width attribute to that element which has the progress of the progress bar.
  • Along with hard coding the left or right positions for individual steps, we would also add a data-position which basically contains the position of that step.
  • We want the step circle to become green only when the progress on the progress bar crosses that particular step. So we will remove step__title — status-icon-completed from the first two steps in the HTML initially and add them back using Javascript when that particular level is reached during animation.

Javascript for the animation
<script>
let progressbar, id, finalWidth, width = 0, self = this, classToAppend, $example, $steps;

function frame() {
if (width >= finalWidth) {
clearInterval(id);
} else {
width += 0.25;
progressbar.width(width + '%');

// Search for check mark and enable

$steps.each(function (index, node) {
const $node = $(node);
const position = $node.data('position');

console.log(position, width);
if (position <= width) {
$node.find('.step__title--status-icon').addClass(classToAppend);
}
});
}
}

$example = $('.example');
$steps = $example.find('.step');

if ($example && $example.length) {
classToAppend = 'step__title--status-icon-completed';

progressbar = $example.find('.progress__bar');
finalWidth = progressbar.data('width');

if (progressbar.length) {
id = setInterval(frame, 7);
}
}
</script>

I’m using jQuery for DOM manipulation here but you can change it to native implementation very easily. This will render the exact animated progress bar with steps shown at the top.

To test this code, paste the HTML/CSS mentioned below onto JSBin here:

<!DOCTYPE html>
<html>
<body>
{with CSS with the style tags mentioned above in the article}
{with HTML pasted above in the article}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{with Javascript pasted above in the article}
</body>
</html>

If you have any feedback, please leave them in comments. Hope this article was of help :)


eTechNinja Solutions — We are a team of ninjas bestowed with high professionalism, skilled developers and designers. Our goal is to enable online sellers and their businesses to thrive.