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.
Displaying Skill Meter Shortcode
To add the shortcode:
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.
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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.
