Animate Elementor Progress Bar on scroll using Magic Scroll addon from Premium Addons PRO and create stunning, interactive designs for your WordPress website. In this tutorial, you’ll learn how to use Elementor Magic Scroll Global Addon that adds powerful scroll animation effects — to bring Premium Progress Bar widget to life as visitors scroll through your page.
This step-by-step guide will show you how to animate progress bar on scroll smoothly, control animation timing, and customize multiple progress indicators in sequence.
Before you begin, check out the Magic Scroll documentation to explore all available animation types and settings.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that Elementor Magic Scroll feature and Premium Progress Bar widget are enabled so you can find them in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Step 1: Add Premium Progress Bar Widget
Go to your website page and from the Elementor editor, drag Premium Progress Bar widget and drop it into your desired section.
For this tutorial, we will mention the options that need to be changed to achieve the same layout, but you can customize your Premium Progress Bar for Elementor as you want on your Elementor page. Please check this article to know more about its settings.
Suggested settings:
- Type: Choose “ Half Circle ”.
- Size: Set it to “200”.
- Show Percentage Value: Enable this option and set Its value to “ 87 ”.
- Use With Magic Scroll: Make sure to enable this option.
Progress Bar > Style: From the Style tab, you can keep adjusting the Colors & Fill Colors, Labels, Prefix & Suffix, adding some Margins & Spacing, and editing the Typography.
Step 2: Enable Magic Scroll Animation
Jump to the widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the repeater item that appeared to you choose Progress Bar from the Select Animation dropdown list.
Recommended settings:
- How This Animation Should Work?: We used “Lock Page Scroll Until Animation Ends” because we want the Progress Bar Percentage Value to reach its end before jumping to next Elementor section. know more about the other options listed under “How This Animation Should Work?” and how they actually work from Magic Scroll documentation article.
- Animation Order: Set the order of the animation of the current Elementor element. The animations with Animation Order set to 1 start first, then animations with Order 2, and so on.
- Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “3”.
Step 3: Duplicate and Animate Multiple Progress Bars
Now after creating the first Progress Bar, we will duplicate its column 3 times and change the settings and styles for the duplicated elements, like changing the percentages values, labels colors, and so on.
For the Magic Scroll settings, in our example, we changed Animation Order option to make them work in sequence. We set the Animation Order values for Progress Bar widgets from left to right to 1, 2, 3, and 4.
You Did It!
Now, you can create your own Elementor Progress Bar Animation Effect for your Elementor website. We’re looking forward to seeing what you will come up with and we encourage you to post your work in our Facebook Group and get other designers inspired.
Tips for Smooth Scroll Animations in Elementor
- Keep animation speed balanced for best user experience
- Avoid overusing “Lock Page Scroll” if you have multiple animations
- Use consistent styles across all progress bars for visual harmony
