# Progresser - Progress Bar for Elementor

- created: 09/21/2021
- latest update: 09/21/2021
- by: merkulove
- elementor.merkulov.design/progresser/

WordPress plugins Documentation

### Overview

The Progresser is a great WordPress plugin for Elementor for creating different types of progress bars to display any numeric values in percent or other units. These can be line, circular, semicircular progress bars to display skills, task completion status, goal achievement, etc.

The Progresser plugin brings three separate Elementor widgets with detailed functionality settings and flexible styles to reach your design goals. Each of them allows you to get a unique progress bar by managing the placement of each item of the block, choosing the required value and units. Feel free to select an icon from the library or use your own created SVG icon. Control the speed, easing, and type of animation. You have no limits on the number of progress bars for pages or for the whole site.

Three types of progress bars included
Includes Templates for Elementor
Supports Icons and SVG Pictures
Crafted for Elementor Builder
Completely Cross-Browser Support
Perfect for Popular Elementor Themes

The responsive plugin with simple and straightforward style settings allows you to flexibly adjust the height and width of the bar lines, manage color on hover and in a normal state. Control typography, background, border, shadow, and other things.

We made sure that it was easy for you to get started with Progresser. With the plugin, you get 5 unique stylized and go-to-use templates. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

Progresser for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

## Features of the Progresser plugin for Elementor

- Three types of progress bar included
- Customisable animation speed and easing
- Different units supported
- Customizable height and width of the bar lines
- Responsive and friendly to any devices
- Font Awesome Icon Support
- Font Awesome Icon Picker Integrated
- Customizable fonts, colors, borders, backgrounds, etc.
- Responsiveness settings
- Works well with all WordPress themes built on Elementor
- Totally SEO Friendly
- Included pot file for quick translation on any language
- Perfect for RTL direction
- Fast and smooth installing
- Tested and compatible up to WordPress 5+
- Lightweight and Fast
- All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
- Easy to use and customize with modern User Interface
- Installation Guide and detailed Users Manual
- Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

### Installing

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

## Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

###### STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

###### STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress

###### STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress

###### STEP 5

Choose archive with Plugin and press Install Now Button

###### STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

## Installation the plugin through FTP or build-in File manager

###### STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

###### STEP 2

Upload archive with plugin to /wp-content/plugins

###### STEP 3

On next step Unzip the archive with the plugin

###### STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

Activate Installed Plugin

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

### Settings

The Progresser is a great WordPress plugin for Elementor for creating different types of progress bars to display any numeric values in percent or other units. These can be line, circular, semicircular progress bars to display skills, task completion status, goal achievement, etc.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Progress bar widgets. You will find the block with a set of widgets at the end of the general section.

Progress bar widgets set

Each of the available elements allows you to build a progress bar of certain types. Drag one by one into the editor to start customizing. In the left pane of the editors, you can customize the dragged widget to suit your needs.

The Progresser plugin currently supports 3 widget types:

- Circle Progress Bar
- Line Progress Bar
- Semicircle Progress Bar

### Circle Progress Bar

Create a smooth circle progress bar with any units on your website in several clicks.

Circle progress bar

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

- Content
- Style
- Advanced

## Content Tab

In the Content section, you can manage the basic settings of the progress bar block such as content, value, icon, animation, etc.

### Progress Bar

- Title – a text field for entering the block title. It can use Dynamic Tags.
- Show title icon – the toggle to enable/disable the icon title display.
- When the option is enabled you can select any icon from the Font Awesome library or upload your own SVG and select the icon position.
- Title alignment – manage the title alignment (left, center, right).
- Title position – specify the title position relative to the bar: Under bar, Above bar.

Title and icon settings of the progress bar block

- Inner text – a text field for entering the inner block text. It can use Dynamic Tags.
- Reflect text and counter value – a toggle to enable/disable the reverse display of text and values.
- Inner text and counter offset Y – specify the offset along the axis Y of the inner text and values in the different unit(px,%)

Inner text settings

- Display counter value – the toggle to enable/disable the counter value display in the block.
- Counter value – specify numeric values for the progress bar using the slider.
- Postfix/Prefix symbol – a text field for entering the value symbol/units. It can use Dynamic Tags.
- Symbol position – specify the position of the symbol relative to the value: After number, Before number.

Counter value settings

- Speed – specify animation of progress bar speed using the slider
- Easing – select animation easing type: Linear, Ease in, Ease out, Ease in out.
- Start animation – select start animation type: Once, On scroll, In viewport.

Animation speed settings

## Style tab

On the style tab, you can manage the element styles of the circle progress bar widget like colors in different states, size, typography, borders, padding/margin, etc.

### Progress Bar

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Progress line height – specify the line height of the progress bar using the slider.
- Progress line width – specify the line width of the progress bar using the slider.
- Rounded stroke linecap – the toggle to enable/disable the rounded stroke linecap.

###### NORMAL/HOVER

The progress bar style settings for different states.

- Line Color – specify the line color and opacity using the color picker.
- Empty Line Color – specify the empty line color and opacity of the progress bar using the color picker
- Fill Color – specify the color inside the circle and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Title

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Icon spacing – specify the space between icon and title in different units(px, em, %) for desktops, tablets, or phones.
- Title icon size – specify the icon size in different units(px, %) for desktops, tablets, or phones using the slider.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

###### NORMAL/HOVER

The title style settings for different states.

- Color– specify the font color and opacity of the text using the color picker.
- Icon Color – specify the color and opacity of the icon using the color picker
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Number/Inner text

- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

###### NORMAL/HOVER

The style settings for different states.

- Color– specify the font color and opacity of the text using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

## Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

## Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

### Line Progress Bar

Create a smooth line progress bar with any units on your website in several clicks.

Line Progress bar example

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

- Content
- Style
- Advanced

## Content Tab

In the Content section, you can manage the basic settings of the progress bar block such as content, value, icon, animation, etc.

### Progress Bar

- Title – a text field for entering the block title. It can use Dynamic Tags.
- Show title icon – the toggle to enable/disable the icon title display. When the option is enabled you can select any icon from the Font Awesome library or upload your own SVG and select the icon position.

Title and icon settings of the progress bar block

- Reflect text and counter value – a toggle to enable/disable the reverse display of text and values.
- Title alignment – manage the title alignment (left, center, right, space around, space between).
- Title position – specify the title position relative to the bar: Under bar, Above bar.

Title position settings

- Inner text – a text field for entering the inner block text. It can use Dynamic Tags
- Inner text alignment – manage the inner text alignment (left, center, right).

Inner text settings

- Display counter value – the toggle to enable/disable the counter value display in the block.
- Counter value – specify numeric values for the progress bar using the slider.
- Postfix/Prefix symbol – a text field for entering the value symbol/units. It can use Dynamic Tags.
- Symbol position – specify the position of the symbol relative to the value: After number, Before number.

Counter value settings

- Speed – specify animation of progress bar speed using the slider
- Easing – select animation easing type: Linear, Ease in, Ease out, Ease in out.
- Start animation – select start animation type: Once, On scroll, In viewport.

Animation speed settings

## Style tab

On the style tab, you can manage the element styles of the line progress bar widget like colors in different states, size, typography, borders, padding/margin, etc.

### Progress Bar

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Progress line height – specify the line height of the progress bar using the slider.
- Progress line width – specify the line width of the progress bar using the slider.
- Rounded stroke linecap – the toggle to enable/disable the rounded stroke linecap.

###### NORMAL/HOVER

The progress bar style settings for different states.

- Line Color – specify the line color and opacity using the color picker.
- Empty Line Color – specify the empty line color and opacity of the progress bar using the color picker
- Fill Color – specify the color inside the circle and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Title

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Icon spacing – specify the space between icon and title in different units(px, em, %) for desktops, tablets, or phones.
- Title icon size – specify the icon size in different units(px, %) for desktops, tablets, or phones using the slider.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

###### NORMAL/HOVER

The title style settings for different states.

- Color– specify the font color and opacity of the text using the color picker.
- Icon Color – specify the color and opacity of the icon using the color picker
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Number/Inner text

- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

###### NORMAL/HOVER

The style settings for different states.

- Color– specify the font color and opacity of the text using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

## Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

## Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

### Semicircle Progress Bar

Create a smooth Semicircle progress bar with any units on your website in several clicks.

Semicircle Progress Bar Example

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

- Content
- Style
- Advanced

## Content Tab

In the Content section, you can manage the basic settings of the progress bar block such as content, value, icon, animation, etc.

### Progress Bar

- Title – a text field for entering the block title. It can use Dynamic Tags.
- Show title icon – the toggle to enable/disable the icon title display.
- When the option is enabled you can select any icon from the Font Awesome library or upload your own SVG and select the icon position.
- Title alignment – manage the title alignment (left, center, right).
- Title position – specify the title position relative to the bar: Under bar, Above bar.

Title and icon settings of the progress bar block

- Inner text – a text field for entering the inner block text. It can use Dynamic Tags.
- Reflect text and counter value – a toggle to enable/disable the reverse display of text and values.
- Inner text and counter offset Y – specify the offset along the axis Y of the inner text and values in the different unit(px,%)

Inner text settings

- Display counter value – the toggle to enable/disable the counter value display in the block.
- Counter value – specify numeric values for the progress bar using the slider.
- Postfix/Prefix symbol – a text field for entering the value symbol/units. It can use Dynamic Tags.
- Symbol position – specify the position of the symbol relative to the value: After number, Before number.

Counter value settings

- Speed – specify animation of progress bar speed using the slider
- Easing – select animation easing type: Linear, Ease in, Ease out, Ease in out.
- Start animation – select start animation type: Once, On scroll, In viewport.

Animation speed settings

## Style tab

On the style tab, you can manage the element styles of the semicircle progress bar widget like colors in different states, size, typography, borders, padding/margin, etc.

### Progress Bar

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Progress line height – specify the line height of the progress bar using the slider.
- Progress line width – specify the line width of the progress bar using the slider.
- Rounded stroke linecap – the toggle to enable/disable the rounded stroke linecap.

###### NORMAL/HOVER

The progress bar style settings for different states.

- Line Color – specify the line color and opacity using the color picker.
- Empty Line Color – specify the empty line color and opacity of the progress bar using the color picker
- Fill Color – specify the color inside the circle and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Title

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Icon spacing – specify the space between icon and title in different units(px, em, %) for desktops, tablets, or phones.
- Title icon size – specify the icon size in different units(px, %) for desktops, tablets, or phones using the slider.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

###### NORMAL/HOVER

The title style settings for different states.

- Color– specify the font color and opacity of the text using the color picker.
- Icon Color – specify the color and opacity of the icon using the color picker
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Number/Inner text

- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.

###### NORMAL/HOVER

The style settings for different states.

- Color– specify the font color and opacity of the text using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

## Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

## Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.