Percentage chart shortcode

Displays a percentage chart element to your web page. Frontend Builder allows you to customize your charts to great extent. You can separately set the width and size of the charts, as well as the color of every individual element.

Examples of the percentage chart shortcode usage

We tried to cover all the basic and
advanced uses for the percentage chart shortcode

A couple of examples of progress bar styles, colors, and sizes.

60

Ephemeral Felicity

75

Dulcet Epiphany

90

Evocative Eloquence

85

Fugacious Elision

Our Collective Skills

90

Quintessential Eloquence

75

Desuetude Dissemble

55

Effervescent Forbearance

Erstwhile Gossamer

Vestibulum vel lacus rhoncus, mollis diam nec, vestibulum lorem. Ut pulvinar tincidunt nis.

Lithe Panoply

Vestibulum vel lacus rhoncus, mollis diam nec, vestibulum lorem. Ut pulvinar tincidunt nis.
80
50

Lilt Elixir

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
90
75

Opulent Panacea

Vestibulum vel lacus rhoncus, mollis diam nec, vestibulum lorem. Ut pulvinar tincidunt nis.

Redolent Ripple

Vestibulum vel lacus rhoncus, mollis diam nec, vestibulum lorem. Ut pulvinar tincidunt nis.

Basic settings for percentage bars shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Number size and color

This option sets the size and color of the percentage number inside of the chart. It can be set independently from the size and color of the chart.

Item aligment

Set the alligment of the chart - left, right, or center.

Line Width

Define the width of the chart line.

Active color

This option defines the color of the dominant (active) line of the chart.

Number value

You can set any value from 1 to 100. The chart will dynamically readjust to match the number value.

Percentage Character

This option toggles percentage character on or off.

Line radius

Sets the total radius of the item.

Passive color

Defines the background (passive) color of the chart's line.

Advanced settings for percentage bars shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode

Animation

You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group