Progress bar
shortcode

Allows you to present the progress bar in stylish way. Visualize the progression of any skill or process.
Read documentation
Usage frequency
75%
Preset amount
83%
Customizability
91%

Available options

Default code: [dfd_progressbar percent="57" title="Title" height_progress_line_style_1="9" ]

Style – Choose between 3 preset styles;

Progress value – Define the progress value;

Icon – This option allows you to enable or disable the icon for the progress bar;

Title – Allows you to add the title for your progress bar;

Animation – Choose between 14 preset animation effects;

Custom CSS Class –  Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Progress line height – This option allows you to specify the progress bar height;

Percents near the title – Allows you to set the percents on the left from the title;

Title & percents position – This option allows you to set the position for the progress bar title and percents;

Progress animation – You can enable or disable the progress animation;

Slanting lines decoration – This option allows you to enable or disable the slanting lines decoration;

Lines animation – You can enable or disable the animation for the slanting lines;

Title position – Specify where the text should be displayed;

Back line  – Customize the style of the back line;

Progress line  – You can customize the style of the progress bar;

Typography – Select letter spacing, font size and element tag. You can also choose the custom font family.

Default and Customized styles

Samples of preset and customized styles
Simple style
Typography
45%
Web design
74%
Php coding
94%
Typography
45%
Web design
74%
Php coding
94%
underlined style
Typography
45%
Web design
74%
Php coding
94%
Typography
45%
Web design
74%
Php coding
94%
info inside style
Typography
45%
Web design
74%
Php coding
94%
Typography
45%
Web design
65%
Php coding
83%
CGI
96%