Need help? You’ve come to the right place

What’s New Getting Started Building Integrating Publishing

The progress bar widget

Last Updated

Adding a progress bar to your page or pop-up can show your visitors how far they are in a particular process—say, opting in to your offer or completing a video series.


Using the progress bar widget

Sometimes, you want to show a user how far they are through a process. A progress bar can entice and encourage visitors to keep going and to finish the opt-in or purchase process.

Customization and styling details

Editing completion percentage

You can click on the widget and select the paint brush icon from the fly-out. You can then adjust the completion percentage using the plus (+) and minus () buttons next to “Completed,” as show below.

NOTE: You can adjust the percentage in 5% increments.

Adjusting animation settings

Animation is enabled by default and is displayed in blue, but can be disabled. Disable animation by clicking the paint brush icon and then clicking the toggle next to "Animation Bar." When disabled, the toggle will turn grey, as show below.

Hide value text

You may not always want folks to display the percentage and “complete” text. In this case, you can hide the text that appears above the progress bar. To do so, click the paint brush icon, then toggle "Show Value Text" as show below.

Change progress bar color

You can change the color of the completed portion, the progress bar itself, and the label text associated with it. Just click the color picker, then select the element whose color you want to change. Then choose from your brand colors, recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color for your date widget as seen here:

​Tips and frequently asked questions

Can my progress bar be made taller?

Currently, the height of the progress bar can’t be manipulated. When placed to the left or right of another widget, its width will automatically adjust to fit into the space, so you can change its width by adjusting its containing column.

Can I change the completed text that appears next to the percentage? 

At this time, there is no way to edit the "Complete" text. Instead, you can toggle the "Show Value Text" option to off and add a text widget above or below the progress bar (so you can directly edit the text).

Need more help?

You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗

Was this article helpful?
Powered by Zendesk