--- title: "How to Add Progress Bar in Elementor WordPress?" url: https://theplusaddons.com/docs/progress-bar-settings-overview/ date: 2024-03-29 modified: 2026-04-09 lang: en author: "Aditya Sharma" description: "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...." image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Add-Progress-Bar-in-Elementor-WordPress_-1024x536.jpg word_count: 772 --- # How to Add Progress Bar in Elementor WordPress? ## - The Plus Addons for Elementor provides a Progress Bar widget for displaying data interactively. - Elementor FREE Plugin and The Plus Addons for Elementor must be installed and activated to use the Progress Bar widget. - Users can select between linear and circular progress bars, with options for height and multiple styles. - Styling options include managing title, subtitle, number styles, and adding icons from FontAwesome or Lottie animations. 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. [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-progress-bar/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Required Setup - [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated. - Make sure the Progress Bar widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Progress Bar and activate. ## Learn via Video Tutorial: https://youtu.be/yEdMsJiC7Js?si=pAQCOcYd2e1-_Yil ## How to Activate the Progress Bar Widget? Go to  - **The Plus Addons **→** Widgets ** - **Search **the widget name** **and** turn on the toggle**. ![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Activate-1024x343.png) ## 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 Typ**e -  You select multiple types of Image/Icon for the progress bar. ## How to Add a Progress Bar in Elementor? Add the Progress Bar widget to the page.  #### Layout From the **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. Based on your selection, you’ll find different options to add the content. ![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Layout.gif) Let’s select **Progress Bar** here. Then, from the **Style** section, you can select a style for the progress bar. From the **Height **dropdown, you have to select the Progress Bar height. Here you’ll find three options – - **Small Height** – To set a small height for the Progress Bar. - **Medium Height** – To set a medium height for the Progress Bar. - **Large Height** – To set a large height 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.* #### Content From the **Title**, you can add a title for the progress bar. ![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Content.png) 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 **Position** dropdown, you can select whether the symbol appears **After Number** or **Before Number in **the progress bar. #### 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. Based on your selection, you’ll find different group controls for an Icon Type. From the **Icon Font** dropdown, you can select and add an icon based on the chosen Icon Type. Here you’ll find three options: - **FontAwesome** – To add classic icons, from the FontAwesome icon library. - **FontAwesome 5** – To add modern icons, from the FontAwesome 5 collection. From the **Use** **Image As Icon** section, you can select an image for the Progress Bar Content. The **Image Resolution** dropdown allows you to select the appropriate image size. After that, from the **Icon Position **dropdown, you can select whether the icon appears before or after the progress bar. From the **Lottie URL** section, you can add a Lottie animation to the number counter using a Lottie file URL. ![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Icon-6.gif) ## How to Style a 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. ![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-ProgressBar-Style.png) **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 the 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 to the progress bar. **On Scroll View Animation -  **This is our global extension available for all our widgets, which adds scrolling animation as the widget comes into the viewport. You can learn more about this from here. Advanced options remain common for all our widgets; you can explore all their options from here. [View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/) ![Progress Bar Demo](https://theplusaddons.com/wp-content/uploads/2024/03/Progress-Bar-Demo-1024x263.gif)