Diagram Progress Bar Shortcode

Last Updated on

The diagram progress bar Shortcode is one of the Jupiter shortcodes that provides an animated representation of your data as a progress bar in diagram style.

In this article, we’ll explain how to configure the diagram progress bar shortcode.

To see the Diagram progress bar shortcode in action, check out the demo page.

Diagram progress bar shortcode - demo

In this article


Displaying the Diagram Progress Bar Shortcode

To add the shortcode:

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Diagram progress bar shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Diagram Progress Bar and click on it to be added to the page.

Diagram progress bar shortcode - add element

4
When the shortcode is added, a new pop-up screen called Diagram progress bar Settings Settings will open that allows you to configure the shortcode settings.

Diagram progress bar shortcode - Diagram progress bar settings

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
Default Text Enter the text that will be shown in the middle of the diagram progress bar.
6
Click on Save Changes and publish or update the page to check the result.

Configuring the Diagram Progress Bar Settings

There are a few general settings that allow to configure the diagram progress bar shortcode to your needs.

Adding Data for the Progress Bar

There are several options you can use to add data to your progress bar:

Setting Description
Data 1 : Percent Adda a percent value to measure your data.
Data 1 : Arch Color Sets the color for the progress bar.
Data 1 : Name Adds the name of the data you are demonstrating. It’ll be shown in the center circle when you hover over the arch.
x
Note: You can add up to seven bars with data. Each bar has the same setting options as described in the data 1 example.

Configuring the Diagram Progress Bar Styling

SettingDescription
Center Circle Background Color Sets the background color of the center circle.
Default Text Color Sets the color of the text inside the center circle.

Adding an Entrance Animation

The Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read the Configuring a shortcode’s entrance animation article for further explanation.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket