Animate the Progress Bar when it enters the viewport

Lorem Ipsum Dolor

If you want to animate the width of a Progress Bar element, you just have to enable it in the option.

The only problem is that the animation will start as soon as the page is displayed. Which is fine if your progress bar is already in the viewport.
But if it is not, you won't see the animation when it enters the viewport.

Check this example: Scroll down to the bottom of this page. You will see two progress bars. Both of them are animated but you won't see the animation for the first one, because it was done while you were reading this ;)

How to do

We are going to use the Waypoints javascript library. I have already made a tutorial about how to load and use it :

Trigger a function when you scroll to an element


Step 1

Add a new progress bar but don't animate it (keep the default settings or click on False for the width animation)

Step 2

Add a Code Block and insert this Javascript code :


(function ($) {

var waypoints = $('#_progress_bar-14-429').waypoint(function(direction) {

  $('#_progress_bar-14-429 .oxy-progress-bar-progress').css('animation', 'oxy_progress_bar_width 2s ease-out 1');


}, {
    offset: '100%'


Replace #_progress_bar-14-429 by your progress bar ID.
For the duration and easing effect, just change this line: 'oxy_progress_bar_width 2s ease-out 1'

That's it. There is nothing else to do.

Lorem Ipsum Dolor
Lorem Ipsum Dolor