Progress Bar Element

08/08/2019

Avada includes multiple animated counter shortcodes, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element include several options for easy customization, and is a great way to visually attract the viewer and display content. read below to find out more about this visual element.

Man Drawing

Progress Bar Element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Skills 85%
Wordpress Development 90%
User Interface Design 85%
View more examples!

How To Use The Progress Bar Element

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the progress bars.

Step 3 – Click on the + Element button at the bottom of the column. Select Progress Bar. Before configuring the options, it’s a good idea to view the Progress Bar Element Demo page to see what’s possible with this fun visual element.

Step 2 – That will open the element’s settings. This element has only one Options panel, and the options are quite straight forward. Initially, you choose the height of your progress bar, and then selecting where you want to display the text. It can be On, Below, or Above the bar itself. The next two options are about whether you want to show the filled area number and any chosen unit on the bar. For example, it could show 85%, just a number, or it could not show at all. The option below this, the Filled Area Percentage, is what determines how much the bar is actually filled with color. Under that, you can choose the color of the fill, the border color and size, the unfilled color and whether you want the filled area to be striped. You can even animate the stripes!

Step 3 – Once you have configured the styling options, the last thing to do is add any text you want on the bar and choose its color. That’s it.

Step 4 – When you have finished styling your element, click Save. You will be returned to your page content. Click preview to view your gallery on the front end, and you can always return to edit the element to make changes. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Progress Bar Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

  • Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px.

  • Text Position – Select the position of the progress bar text. Choose “Default” for theme option selection. Choose from Default, On Bar, Above Bar, or Below bar.

  • Display Percentage Value – Select if you want the filled area percentage value to be shown. Choose from Yes, or No.

  • Progress Bar Unit – Insert a unit for the progress bar. ex %.

  • Filled Area Percentage – From 1% to 100%.

  • Filled Color – Controls the color of the filled in area.

  • Filled Border Size – In pixels, from 0 – 20.

  • Filled Border Color – Controls the border color of the filled in area.

  • Unfilled Color – Controls the color of the unfilled in area.

  • Striped Filling – Controls if the filled area is striped. Choose from No, or Yes.

  • Animated Stripes – Controls if the stripes are animated. Choose from No, or Yes.

  • Progress Bar Text – Insert the text that will show on the progress bar.

  • Text Color – Controls the text color.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

  • CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Person Element. 

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 37px.

  • Text Position – Select the position of the progress bar text. Choose from On Bar, Above Bar, or Below Bar.

  • Progress Bar Filled Color – Controls the color of the progress bar filled area.

  • Progress Bar Filled Border Color – Controls the border color of the progress bar filled area.

  • Progress Bar Filled Border Size – Controls the border size of the progress bar filled area. In pixels, from 0 – 20.

  • Progress Bar Unfilled Color – Controls the color of the progress bar unfilled area.

  • Progress Bar Text Color – Controls the color of the progress bar text.

View The Options Screen

Progress Bar Element Parameters

Copy to Clipboard
    • height – Accepts a pixel value. For example, 10px. Set the progress bar’s height.
    • text_position – Choose from default, on_bar, above_bar, and below_bar. Sets the text position relative to the progress bar.
    • show_percentage – Choose from yes or no. Show or hide the filled area value.
    • unit – Accepts an alphanumeric value or symbols. For example, % or cm. Sets the unit of measurement.
    • percentage – Choose from 1 – 100. Set the filled area percentage value.
    • filledcolor – Accepts a hexcode ( #000000 ). Sets the filled area’s color.
    • filledbordersize – Accepts a numerical value. For example, 1. Sets the filled area’s border size.
    • filledbordercolor – Accepts a hexcode ( #000000 ). Sets the filled area’s border color.
    • unfilledcolor – Accepts a hexcode ( #000000 ). Sets the unfilled area’s color.
    • striped – Choose from yes, or no. Show or hide fill’s striped pattern.
    • animated_stripes – Choose from yes, or no. Enable or disable the fill’s stripped pattern animation.
    • textcolor – Accepts a hexcode ( #000000 ). Sets the text’s color.
    • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
    • custom content – Insert the progress bar text between the
      Copy to Clipboard

      tags.

    • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

    • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.