Progress Bar Element

To start, add the element into your desired column. That will open the element’s settings. This element has only one Options panel, and the options are quite straightforward. Initially, you choose the height of your progress bar and then select 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!

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. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.