Premium Progress Bar Widget

Intro

Premium Progress Bar can be used for showing skills and project progress. This widget has more options than the default progress bar included with Elementor.

You can view examples of the Progress Bar widget on the demo page.

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
  • 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 Widget
Elementor Progress Bar Widget

Key Features

Progress bar settings

  • Type:
    • Line
    • Circle
    • Dots

Line Progress Bar Options

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.
Elementor Progress Bar Left/Right Label
Elementor Progress Bar Left Right Label
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 or a striped background.
  • 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.
Elementor Progress Bar Multi Label Progress Bar
Elementor Progress Bar Multi Label Progress Bar
Elementor Progress Bar Multi Labels Progress Bar Example
Elementor Progress Bar Multi Labels Progress Bar Example

Circle Progress Bar Options

  • Size: Set the size of the circle.
  • 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 the progress bar will be filled. The default is 50.
  • 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.
Premium Circle Progress Bar for Elementor Settings
Circle Progress Bar for Elementor Settings
Elementor Circle Progress Bar Example
Elementor Progress Bar Circle Type Example

Dots Progress Bar Options

  • Dot Size: Set the size of the dots.
  • Spacing: Set the space between dots.
Rest of options same as Line type
Dotted Progress Bar for Elementor
Dotted Progress Bar for Elementor
Example for Premium Progress Bar Dots Type for Elementor
Example for Premium Progress Bar Dots Type for Elementor

Style

The Style tab has different options available, depending on if you have selected progress bar type Line, Circle and Dots and for Label, it’s the Left and Right labels or the Multiple Labels.

  • Progress bar
  • Labels
  • Multiple Labels
  • Indicator
  • Icon

1. Progress Bar

  • Height: Set progress bar height in pixels. The default is 25.
  • 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. If an image is selected, the following options become available:
    • Position:
      • Default
      • Top Left
      • Top Center
      • Top Right
      • Center Left
      • Center Center
      • Center Right
      • Bottom Left
      • Bottom Center
      • Bottom Right
      • Custom: Adjust the image’s X and Y positions using pixels, em % or vw.
    • Attachment: Default, Scroll or fixed.
    • Repeat:
      • Default
      • No-repeat
      • Repeat
      • Repeat-x
      • Repeat-y
    • Size:
      • Default
      • Auto
      • Cover
      • Contain
      • Custom Adjust the image width using pixels, em % or vw.
  • 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 between the progress bar and the rest of page content. Adjust the margins for one side at the time, or for all sides using pixels, em or %.
Elementor Progress Bar Widget Progress Bar Style
Elementor Progress Bar Widget Progress Bar Style

2. Labels

These options are only available if the Left and Right labels are enabled.

Title
  • Color: Pick a color for the title label text.
  • Typography: settings you can:
    • Select from a large number of font families.
    • Select the font size in either pixels, em, rem or vw.
    • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
    • Transform the text to Uppercase, lowercase, capitalized, default or normal.
    • Select a font style: Normal, italic or oblique.
    • Select a text decoration: Default, underline, overline, line through, none.
    • Adjust the line-height.
    • Adjust the letter spacing.
  • Margin: Margin is the space between the title label text and the percentage, and the space between the title label text and the progress bar. Adjust the margins for one side at a time, or for all sides using pixels, em or %.

Percentage:

The percentage settings are the same as for the Title: Color, Typography and Margin, but are applied to the percentage and the % symbol.

Elementor Progress Bar Labels Style
Elementor Progress Bar Labels Style

3. Multiple Labels

This option is only available if multiple labels are enabled.

  • Labels’ Color: Pick a color for the label text.
  • Typography: settings you can:
    • Select from a large number of font families.
    • Select the font size in either pixels, em, rem or vw.
    • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
    • Transform the text to: Uppercase, lowercase, capitalized, default or normal.
    • Select a font style: Normal, italic or oblique.
    • Select a text decoration: Default, underline, overline, line through, none.
    • Adjust the line height.
    • Adjust the letter spacing.
  • Percentage Color: Pick a color for the percentage text and % symbol.
  • Percentage Typography: This option has the same settings as the Label’s Typography settings above.
Elementor Progress Bar Multiple Labels Style
Elementor Progress Bar Multiple Labels Style

4. Indicator

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.
Premium Progress Bar for Elementor Indicator Style
Premium Progress Bar for Elementor Indicator Style

5. Icon

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 choose from the following border types:
    • None (Default).
    • Solid.
    • Double.
    • Dashed.
    • Groove.
  • 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 (%).
Elementor Progress Bar Widget Icon Style
Elementor Progress Bar Widget Icon Style

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.