How to Add Progress Bar in Elementor WordPress?

Updated on April 2, 2024 by Editorial Team
Table Of Content

The Plus Addons for Elementor’s Progress Bar widget allows users to display data and statistics in an interactive and visually appealing manner, making it easier to communicate with their audience.

Required Setup

Learn via Video Tutorial:

How to Activate the Progress Bar Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save
Activate progress bar

Key Features

  • Bar Progress – You can easily add linear progress bars.
  • Circle Progress: You can create circular progress bars.
  • Multiple Styles – You can add multiple styles for progress bars.
  • Multiple Image Type –  You select multiple types of Image/Icone for the progress bar,

How to Add Progress Bar in Elementor?

Add the Progress Bar widget to the page. 

Progress Bar

From the Select Main Style dropdown, you have to select the style type. Here you’ll find two options –

Progress Bar – To add a line progress bar.

Pie Chart – To add a circle progress bar.

Let’s select Progress Bar here.

Then from the Progress Bar Style dropdown, you can select a style for the progress bar.

After that in the Dynamic Value field, you have to set a value between 0% and 100% that will control how much of the progress bar is filled in.

Note: This number is only used for the animation and does not appear as text.

From Title, you can add a title for the progress bar.

From Sub Title, you can add a subtitle for the progress bar.

The Number field allows you to display a numeric value as text within the progress bar.

In the Prefix/Postfix Symbol field, you can add a symbol to the progress bar.

With the Symbol Position dropdown, you can select whether the symbol appears before or after the progress bar.

Progress bar style

Icon

From here you can add an icon for the progress bar.

From Select Icon, you can select the icon type.

Here you’ll find four options – 

None – For no icon in the info box

Icon – You can use standard icons and text in this option.

Image – In this option, you can use an image with text.

Lottie – In this option, you can use Lottie animation icons with text.

After that from the Icon TItle Before after dropdown, you can select whether the icon appears before or after the progress bar.

Progress bar icon

How to Style Progress Bar in Elementor?

To style the Progress Bar, you’ll find all the options in the Style tab.

Title Setting –  From here, you can manage the title style.

Progress bar style settings

Sub Title Setting –  From here, you can manage the sub-title style.

Number Setting –  From here, you can manage the number style. You can change the typography and number color.

Number Prefix/Postfix –  From here, you can manage the symbol style in the progress bar.

Icon/Image Setting – From here, you can manage the icon style.

Progress Bar Setting –  From here, you can manage the top margin and add background color in the progress bar.

On Scroll View Animation –  This is our global extension available for all our widgets, this adds scrolling animation as the widget comes in the viewport. You can learn more about this from here.

Advanced options remain common for all our widgets, you can explore all its options from here.

View Advanced tab tutorial.

Progress bar demo
OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X