Premium Progress Bar can be used for showing skills and project progress. This widget has more options than any other Progress Bar widget. Elementor Progress Bar widget is coming with 4 progress types: Line, Half Circle, Circle and Dots.
You can view examples of the Progress Bar Widget on the demo page.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that this addon is enabled so you can find it 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.
Elementor Progress Bar Widget
Elementor Progress Bar Types
Elementor Progress bar is coming with 4 types that will help you create the progress bar that matches your needs.
- Type:
- Line
- Half Circle
- Circle
- Dots
Elementor Line Progress Bar
When selecting the number of labels, you can choose the basic settings with two labels (Left and right), or you can choose the Multiple Label options, which is very useful for showing a project timeline where multiple steps need to be presented.
Left & Right Labels
- Title: Add a text for the title that will show above the progress bar.
- Percentage: Add the text that will be displayed above the progress bar, to the right. If you wish to show the % symbol, you need to include it in the text field.
- Value: Set value for how far the progress bar will be filled. The default is 50.
- Style: Set a background type for the progress bar. You can choose between a solid color or a striped background.
- Speed: Set the speed in milliseconds with which the progress bar will be filled.
Multiple Labels
When you choose the Multiple Labels option, you can add any number of labels to the progress bar by clicking on the Add Item button.
- Label: Add a text for the label.
- Percentage: The percentage will be shown after the label text. It is also the position of the labels along the progress bar.
- Enable Percentage: Enable or disable the percentage and the % symbol after the label text.
- Labels Indicator: The Labels indicator is a symbol below the label text, that points to the percentage. Choose between none, pin, and arrow.
- Labels Alignment: Align the label text to the left, center or right of its position.
- Value: Set the value for how far the progress bar will be filled. The default is 50.
- Style: Set background type for the progress bar. You can choose between a solid color, a striped background or an animated gradient
- Speed: Set the speed in milliseconds with which the progress bar will be filled. The progress bar will be filled from the left up to the position that you selected in the Value option.
- Animated: Enable to animate striped background. (Striped Background)
- Gradient Colors: Pick colors for progress bar background. Enter Colors separated with ‘ , ‘. (Animated Gradient)
Elementor Circle Progress Bar
- Size: Set the size of the circle.
- Title: Set title for circle.
- Title Max Width: Set title max-width in different units and on all devices to wrap text. It’s very helpful if you’re using long text.
- Icon Type: You can select between Font Awesome icon Library, custom image and Lottie Animation.
- Icon Size: Set icon size.
- Show Percentage Value: Show percentage inside the circle.
- Value: Set the value for how far circle will be filled. The default is 50.
- Speed: Set the speed in milliseconds with which the circle will be filled.
Elementor Half Circle Progress Bar
- Prefix Label: Insert text that will be shown at starting of half circle progresses type.
- Suffix Label: Insert text that will be shown at end of half circle progress type.
Rest of options same as Circle type
Elementor Dots Progress Bar
- Dot Size: Set the size of the dots.
- Spacing: Set the space between dots.
Rest of options same as Line type
Style
The Style tab has different options available, depending on if you have selected progress bar type Line, Half Circle, Circle and Dots. Also, for Labels, it’s the Left and Right labels or the Multiple Labels.
- Progress bar
- Labels
- Multiple Labels
- Indicator
- Icon
Elementor Progress Bar General Style
- Height: Set progress bar height in pixels. The default is 25. (Line Type)
- Border Radius: Set border-radius for the progress bar in pixels, % or em. A higher value means more rounded corners.
- Fill Background: Set a background type for the part of the progress bar that indicates the progress. You can select a solid background color or a gradient, or select or upload an image via the WordPress media library.
- Base Background: This option has the same settings as the Indicator Background, but styles the rest of the progress bar.
- Margin: Margin is the space around the progress bar. Adjust the margins for one side at the time, or for all sides using pixels, em or %.
Labels Style for Elementor Progress Bar
These options are only available if the Left and Right labels are enabled.
Title & Percentage Style
- Color: Pick a color for the title/percentage label text.
- Typography: Customize progress bar title/percentage font.
- Margin: Margin is the space around title/percentage label text. Adjust the margins for one side at a time, or for all sides using pixels, em or %.
Multiple Labels Style for Elementor Progress Bar
This option is only available if multiple labels are enabled.
- Labels’ Color: Pick a color for the label text.
- Typography: Customize progress bar label font.
- Percentage Color: Pick a color for the percentage text and % symbol.
- Percentage Typography: Customize progress bar label percentage
Indicator Style for Elementor Progress Bar
This option is only available if a label indicator is enabled.
- Color: Pick a color for the indicator symbol between the label text and the progress bar.
- Size: Set the width of the indicator symbol in pixels or em.
- Height: Set the height of the indicator symbol in pixels or em.
Elementor Progress Bar Icon Style
This option is only available if the icon option in circle type is enabled.
- Color: Pick a color for icon.
- Background Color: Pick a color for icon background.
- Border Type: Set border type for the icon.
- Width: Set border width.
- Color: Pick a color for your border.
- Border Radius: Set a border-radius for the icon in pixels, % or em. A higher value means more rounded corners.
- Padding: Creates space around the icon, inside of any defined margins and/or borders. You can set Padding in Pixel (px), Em (em), or Percentage (%).
Prefix & Suffix Style in Elementor Progress Bar
- Top Spacing: Set top spacing between prefix & suffix and half-circle shape.
- Color: Pick colors for prefix & suffix text.
- Typography: Customize prefix & suffix label fonts.
- Spacing: Set left & right spaces for prefix & suffix label.
If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.
