Skill Meter Shortcode

Updated on September 13, 2017

The skill meter shortcode is one of the Jupiter shortcodes that provides an animated representation of your data as a progress bar.

In this article, we’ll explain about configuring skill meter shortcode.

To see the Skill Meter shortcode in action, you may check the demo page.

Skill meter shortcode - demo

Displaying Skill Meter Shortcode

To add the shortcode:

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

Skill meter shortcode - visual composer screen

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

Skill meter shortcode - add element

4When the shortcode is added, a new pop-up screen called Skill Meter Settings opens. It gives you the ability to configure the shortcode settings.

Skill meter shortcode - Skill meter settings

5Configure the settings as required.
6Click Save Changes and publish or update the page to check the result.

Configuring Skill Meter Settings

After you added the Skill Meter shortcode, a pop up window will appear where you can set options for this shortcode. Below is the detailed description of each option for Skill Meter shortcode.


Title Sets a title for the shortcode. It will be added at the top of the graphical representation.
Percent Sets the percentage to show in the shortcode. The colored section of the bar will fill that percentage of the whole bar to show it as a graphical representation of the data.

Configuring Skill Meter Styling

To set the bar thickness or change colors you need edit the following options. Each option has a description which you can find below:


Bar Thickness Sets the thickness of the bar. The value of the option is in pixels and the default amount is 22 pixels.

Configuring Text Color

There are two options which gives you possibility to edit color for title and percentage:

Setting Description

Title Text Color Sets the text color for the title of the shortcode.
Percentage Text Color Sets the text color of the percentage shown inside the bar.

Configuring Bar Color

There are also two settings which allow you to set colors for bar:

Setting Description

Bar Track Color Sets the background color of the bar which represents the whole spectrum.
Bar Progress Color Sets the foreground color of the bar which represents the percentage to show.

Adding an Extra Class Name

Extra Class Name field in the setting 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 style sheet or JavaScript file.

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

Did this answer your question?