Thrive Knowledge Base

How to Use the Progress Bar and Fill Counter Elements

The 'Progress bar' and the 'Fill counter' are the data elements in Thrive Architect. They come in handy, if you want to show data like percentages on your website.

'Progress bar'

In order to use this element, first drag & drop it to your page and then, customize it to your liking with the help of its options, which are the following:

Fill Color and Background Color

You can change the fill and the background color of your ‘Progress Bar’ quite easily. Click on the boxes with the colors and select the color, as well as the opacity, that you like.

Choosing a light background color is optimal, because this way, the distinction between the ‘Fill Color’ and the ‘Background Color’ is more obvious.

Fill Percentage

If you want to change the fill percentage of your progress bar, all you have to do is drag the slider under this specific option, or enter a value manually on the box next to it and you will see how the percentage changes accordingly.

Inner Label and its color

By default, the progress bar comes with an inner label, which is 'Progress Bar'. You have the possibility to remove this label by unchecking the 'Add Inner Label' box.

You can also change it, by clicking on the label text and writing what you would like the label to say instead. This text should be a representation of what your progress bar displays exactly.

You can use the 'Label color' option if you want to add a color to this label. You just have to click on the box and select the color from the color picker.

'Fill counter'

Using and customizing this element is similar to how the 'Progress bar' works. With the help of its specific options you can have a ‘Fill Counter’ that best suits your needs.

Counter Size and Fill Percentage

Simply drag the slider under these options or enter a value manually in the box next to them, to change the size or the fill percentage of the 'Fill Counter'

Please keep in mind, that changing the ‘Fill Percentage’ won't automatically change the percentage number in the counter. You should think about the inner part as a separate part of the counter.

If you wish to change the percentage number, or the 'Fill Counter' label, please click on them and edit the inline texts.


There are three colors of the ‘Fill Counter’ that you can change: the ‘Circle Color’, the ‘Fill Color’ and the ‘Inner Color’. Each of these can be changed by clicking on the color box next to them and selecting the specific color from the color picker.

In case you want to make further adjustments to the 'Progress Bar' or the 'Fill Counter' elements, you can use the more general options available for both of them.

Should you need more info on how various Thrive Architect elements work, please follow this link.

Hopefully this article was useful for you. If so, please give us a smile below :)