< All Topics

Progress Bars are interactive horizontal percentage bars which are used to display skills, value or progress of an individual or organization. They add a nice touch to the website’s creativity.

Pro Tip
While everyone uses this widget for showcasing their skill levels. you can try something different. Use this tool to showcase accomplishments you did for your clients. For eg: 25% increase in traffic, 10% less bounce rate etc.

How to use the Progress Bar Widget of The Plus Addons For Elementor

Creating progress bars is very easy using this widget. Just follow the tutorial below.

Table Of Contents

General Steps

Search for the Progress Bar widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Progress Bar widget. First, click on the Content tab.

1. Content

Progress Bar

Select Main Style

Select the Progress Bar option from the drop down.

Progress Bar Style

Choose the progress bar style from here.

Height

Set the height for progress bar.

Dynamic Value

Input the value to show the highlighted area of progress.

Title

Insert the title text in here.

Sub Title

Insert the sub title text in here.

Number

Insert the number you want to display in here.

Prefix / Post fix Symbol

Add prefix or postfix symbol here, mostly it is % or in terms of money.

Symbol Position

Choose if you want to show the symbol before or after the number.

Icon

Select Icon

You can select an icon or a custom image.

Image Size

Select the size of your image if you decide to use an icon image.

Icon Font

Use any icons from popular font families like FontAwesome or Icons Mind.

Icon Library

Select your icon from the dropdown.

Icon Title Before After

Decide where to place your title. You can place it before or after the title.

2. Style

The Style tab is used for customizing the look of all the Progress Bar widget components such as color, background, border radius, box shadow etc.

Title

Typography

Assign size, weight, spacing and much more to fonts.

Title Color

A color picker to assign suitable color to the title.

Title Left Margin

Manage left spacing for title from here.

Sub Title Setting

Typography

Assign size, weight, spacing and much more to fonts.

Sub Title Color

A color picker to assign suitable color to the subtitle.

Number Setting

Typography

Assign size, weight, spacing and much more to fonts.

Number Color

A color picker to assign suitable color to the numbers.

Icon Prefix/Postfix Style

Typography

Assign size, weight, spacing and much more to fonts.

Prefix/postfix Color

A color picker to assign suitable color to the symbol.

Progress Bar Settings

Progress Bar Top Margin

Set a spacing from top from here.

Background

Apply suitable background like color/ gradient to an element.

Empty Color

A color picker to assign suitable color to the non-highlighted portion.

On Scroll View Animation


On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced


Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?