Animate the Progress Bar when it enters the viewport

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

Once again we are going to use our customized Animate On Scroll feature.

No need to load any Javascript, we just need to add some custom CSS.

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

Select your Progress Bar and go to Advanced / Effets and enable the Animation. Select fade:

Step 3

Add this CSS:

With the stripes animation:

.oxy-progress-bar[data-aos^=fade][data-aos^=fade].aos-animate .oxy-progress-bar-progress {
	animation: oxy_progress_bar_width 3s ease-out 1, oxy_progress_bar_stripes 1s linear infinite!important;
}
.oxy-progress-bar[data-aos^=fade][data-aos^=fade].aos-animate .oxy-progress-bar-background {
	animation: oxy_progress_bar_stripes 1s linear infinite!important;
}

Without the stripes animation:

.oxy-progress-bar[data-aos^=fade][data-aos^=fade].aos-animate .oxy-progress-bar-progress {
	animation: oxy_progress_bar_width 3s ease-out 1!important;
}

It's also quite easy to customize the progress bars with some CSS.

Here are some example from my Design Set Unlimited Elements: