Want to display skills, project milestones, or completion rates with a visual progress indicator? The Progress Bar widget in aThemes Addons lets you add animated line and circle progress bars with customizable colors, icons, and typography.
In this guide, we’ll walk you through how to activate and configure the Progress Bar widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to the aThemes Addons dashboard in your WordPress admin area and search for the Progress Bar widget. Toggle the switch to activate it. Once activated, the widget is available in the Elementor editor.
Exploring Widget Options
Configuring the Progress Bar Section
Set up the core progress bar settings in the Content tab:
- Layout – Choose between Line or Circle style for the progress bar.
- Title – Enter a label for the progress bar and select the HTML tag for the title element.
- Icon Type – Select None, Icon, or Lottie to add a visual element. The Lottie option is available with the Circle layout.
- Lottie Animation – Provide a JSON URL or upload a Lottie animation file when using the Lottie icon type.
- Percentage – Set the progress percentage value for the bar.
- Display Percentage – Toggle whether the percentage number is visible on the progress bar.
- Inner Text – Add custom text inside the progress bar or circle.
- Text Position – Choose Inside or Outside placement for the text. This option applies to the Line layout.
Customizing Progress Style
Fine-tune the visual appearance of the progress bar in the Style tab:
- Color – Set the fill color of the progress bar.
- Background Color – Set the background color behind the progress fill.
- Height – Adjust the height of the progress bar (Line layout).
- Border Radius – Round the corners of the progress bar.
- Circle Size – Set the diameter of the circle (Circle layout).
- Stroke Width – Adjust the thickness of the circle stroke (Circle layout).
- Stripes – Add a striped pattern to the progress bar fill.
- Animated Stripes – Enable animation on the striped pattern for a dynamic effect.
- Inner Padding – Add padding inside the progress bar container.
Styling Content Elements
Customize the typography and colors of the text elements within the widget:
- Title – Adjust color, typography, and text shadow for the progress bar title.
- Inner Text – Style the text displayed inside the progress bar or circle.
- Percentage – Customize the appearance of the percentage display.
Getting the Most from the Progress Bar
Keep these tips in mind when using the Progress Bar widget:
- Use clear, descriptive titles so visitors immediately understand what each bar represents.
- Match the progress bar colors to your site’s branding for a cohesive look.
- Experiment with both Line and Circle layouts to find the best fit for your design.
That’s it! You’ve successfully configured the Progress Bar widget to display animated progress indicators with custom styling on your site.
Next, would you like to showcase your latest posts in a dynamic carousel? Check out our guide on Using the Posts Carousel Widget to learn more.
