Percentage bar shortcode

Displays a progress bar element to your web page. Frontend builder allows you to fully customize your percentage bars by changing the layout, color, size, and shape of the item, in order to better incorporate it into your design.

Examples of the percentage bar shortcode usage

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

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

Lissome Nemesis

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. Vestibulum vel lacus rhoncus, mollis diam nec, vestibulum lorem.
Insouciance
0%
Onomatopoeia
0%
Palimpsest
0%
Quintessential
0%
Insouciance
0%
Onomatopoeia
0%
Palimpsest
0%
Quintessential
0%
Plethora
0%

Clara Ellison

WEB DESIGNER
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.

Our Combined Skills

Murmurous Leisure
0%
Fetching Imbrication
0%
Emollient Efflorescence
0%

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

Bar Style

This option sets the basic visual style of the percentage bar element. You can choose between a round, or sharp version.

Bar height

Sets the height of individual bars.

Percentage Pin

Toggles the percentage pin on and off.

Image/Pattern

If you choose so, you can set an image or a pattern to act as a background of a bar. You can get creative results by experimenting with transparent PNG images and different colors.

Bar active color

Sets the color of the active portion of the bar. Every bar's color can be set individually.

Animation speed

Sets the speed of the animation in ms. Every bar can be modified individually.

Bar margin

Set the size of the margin between the bars.

Headline and bar background color

You can set custom colors for headlines and bar backgrounds, using the color picker, or hex code.

Headline inside

This option sets the headline inside the bar. By default, it is set above it.

Direction

You can set the direction of the bar's spread - left to right, or right to left. Every individual bar inside the element can be modified accordingly.

Percentage

Set the percentage number of the bar. When changed, the bar will readjust accordingly.

Pin background and text color

You can set custom colors for background and text of the percentage pin, if the element is enabled.

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