V4 Elements Progress Bar Estimated reading: 5 minutes 5 views Show how far along something is: a skill, a goal or a project. It fills up in front of your visitors as they scroll. No code needed. WIDGET Progress Bar STYLES Line, Dot and Circle PLAN Free A QUICK LOOK What You Will Build Three styles, one widget. Each one fills up on its own when it comes into view. The Line, Dot and Circle styles filling up BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Progress Bar is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Progress Bar under General Widgets and switch it on. Click Save Settings. The Progress Bar card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the Progress Bar in. Click the + button at the top left to open the Elements panel. Look under AAE General for Progress Bar. Drag it onto your page. The Progress Bar in the Elements panel (click to zoom) Tip: Can not see it? Type Progress Bar in the search box at the top of the panel. Note: A new Progress Bar is a simple bar at 50%. It already works. Next, you can pick a different style. STEP 3 Pick a Style There are three styles. Each one is a preset, so it takes one click. Click your Progress Bar to select it. In the General tab, open Presets. Click Apply a preset. Pick progressbar-line, progressbar-dot or progressbar-circle. The Apply a preset button (click to zoom) Note: The preview pictures in the list are grey boxes for now. That is normal. Just pick the style by its name. Tip: Want to go back to the first look? Click Reset to Default. progressbar-line A straight bar. It starts at 65% and shows the number above the bar. progressbar-dot A row of five dots. It starts at 60%, so three dots fill up. This one hides the number. progressbar-circle A ring with the number in the middle. It starts at 72%. STEP 4 Set Your Percentage Now tell the bar how full it should be. In the Progress Bar section, type a number in Percentage, for example 85. Switch Display Percentage on if you want to show the number. Switch it off to hide it. Click Update to save your page. Percentage (1) and Display Percentage (2) (click to zoom) Tip: The Dot style has five dots, so it fills them in steps of 20%. 60 fills three dots, and 80 fills four. STEP 5 Make It Match Your Brand Change the color so it fits your site. Every part has its own Style tab. Open the Structure panel. It is the little layers icon at the top right. Open the Progress Bar, then open the Track. Click Fill. This is the colored part that grows. Open the Style tab, then Background, and change the Color. To change the number, click Percentage and use its Style tab. The Fill (1) and the Percentage (2) (click to zoom) Change the Fill color here (1) (click to zoom) Tip: The grey part behind the fill is the Track. Click it to change its color too. RESULT Final Result Here are the three styles side by side, shown when they have finished filling. The bar went to 65%, the dots to 60% and the ring to 72%. The three styles after they finish filling SETTINGS Options Percentage Default: 50How full the bar is, from 0 to 100. Display Percentage Default: OnShows the number. The Dot style does not show a number. Presets Line, Dot and Circle. Pick one to change the look in one click. ID Optional CSS ID for the widget. GOOD TO KNOW More Details It fills when you scroll to it The bar starts to fill when it comes into view. It takes about a second and a half, and it only plays once. The number counts up The percentage number counts up while the bar fills. Many bars Add as many as you like. Each one has its own percentage, for example one for each skill. HELP Troubleshooting I do not see the Progress Bar in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Progress Bar. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The bar is already full when I open my page The bar fills when it comes into view. If it is at the top of the page, it starts right away, so you may miss it. Add some content above it to see it fill. I do not see the number Open the Progress Bar section and switch Display Percentage on. The Dot style never shows a number. The preview pictures in the preset list are grey That is normal for now. Choose the style by its name: line, dot or circle. I want a different color Open the Structure panel, click Fill, then use the Style tab and Background. You Did It Your page now shows progress in style. If you face any problem, please contact our support team. We are happy to help.
