The Progress Bar Widget allows you to display animated progress bars or circles that animate when you scroll to them. It’s perfect for visually representing skills, project completion, or any progress metrics on your website.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Progress Bar section
- Layout: Choose between “Line” or “Circle” to define the style of the progress indicator.
- Title: Enter a title for the progress bar. You can also select the HTML tag for the title.
- Icon Type: Select “None”, “Icon”, or “Lottie” for the icon type when using a circle layout.
- Icon: Choose an icon if “Icon” is selected as the icon type.
- Lottie Animation: If “Lottie” is selected, provide the JSON URL or upload the JSON file.
- Percentage: Set the progress percentage to display.
- Display Percentage: Toggle to show or hide the percentage text.
- Inner Text: Enter any text to display inside the progress bar or circle.
- Text Position: Choose “Inside” or “Outside” for the text position (available for line layout).
Style tab
Customize the appearance of your progress bar under this tab. You can adjust colors, sizes, border radius, and other styling options to match your website’s design.
Progress Style
- Color: Set the color of the progress bar or circle.
- Background Color: Choose the background color of the progress container.
- Height: Adjust the height of the line progress bar.
- Border Radius: Set the border radius for rounded corners on the line progress bar.
- Circle Size: Define the size of the progress circle.
- Stroke Width: Adjust the stroke width of the progress circle.
- Stripes: Toggle to add striped patterns to the line progress bar.
- Animated Stripes: Toggle to animate the striped pattern on the line progress bar.
- Inner Padding: Adjust the padding inside the line progress bar.
Content Style
- Title: Customize the title text color, typography, and text shadow.
- Inner Text: Adjust the inner text color, typography, and text shadow.
- Percentage: Set the percentage text color, typography, and text shadow.
These style options allow you to tailor the widget’s appearance to ensure it integrates seamlessly with your site’s design.
Usage tips
- Use clear, descriptive titles for each progress bar or circle to ensure visitors understand what is being measured.
- Adjust the colors to match your website’s branding for a cohesive look.
- Experiment with different layouts and styles to find the best fit for your content.
Conclusion
The Progress Bar Widget is a versatile tool for displaying progress indicators on your website. With extensive customization options, you can create engaging and visually appealing progress bars or circles that fit perfectly with your site’s design.