Progress Bar | SP Page Builder (Pro) - Documentation | JoomShaper

SP Page Builder (Pro)

Updated Last: 18 March 2024

Progress Bar

The Progress Bar addon is a chart that displays progress in the form of a horizontal bar. This chart is very handy when it comes to representing complex information in a simple way. 

How to Add a Progress Bar

To add a Progress Bar, start by opening the Addons Panel. The Addons Panel can be accessed by clicking on the Addons button on the Sidebar. You’ll find the Progress Bar addon under the Content section so drag & drop it to where you want it placed.

Progress Bar Settings

SP Page Builder 4.0

Open the Progress Bar Settings by clicking on its icon on the inline editor. Here, you’ll find several options to work with including:

Label: Add text using this option to explain what the Progress Bar is for.

Progress: Set the percentage of Progress achieved. 

Bar Height: Define the height of the Progress Bar. Leave blank to use default height.

Style: Set the style of your Progress Bar. Choose the Custom option if you want it to be a custom color.

Stripped: Enable this to get a stripe patterned Progress Bar.

Percentage: Enable this to display the progress percentage.

Typography Settings

Click on the ‘A’ Letter icon on the inline editor to open the Typography window. Here, you can adjust the Font, Font Size, Line Height, etc for the text in your Progress Bar. For detailed information on Typography check out this documentation.

Color Settings

Change your Testimonial’s color scheme using the Color Settings. Click on the Circle icon from the inline editor to open this window. Here, you will be able to change the color of the Bar, Progress, Label, and Percentage. Clicking on the color box will open the Color Picker window where you can easily select the color you want.

More on Color Settings here.