WordPress
PHP
Photoshop
[su_progress_bar style="default" text="WordPress" percent="60"]
[su_progress_bar style="default" text="PHP" percent="75"]
[su_progress_bar style="default" text="Photoshop" percent="90"]
Photoshop
PHP
WordPress
[su_progress_bar style="fancy" percent="40" text="Photoshop" bar_color="#ffffff" fill_color="#f01c3c" text_color="#000000"]
[su_progress_bar style="fancy" percent="60" text="PHP" bar_color="#ffffff" fill_color="#f01c3c" text_color="#000000"]
[su_progress_bar style="fancy" percent="80" text="WordPress" bar_color="#ffffff" fill_color="#f01c3c" text_color="#000000"]
Photoshop
PHP
WordPress
JavaScript
HTML5/CSS3
[su_progress_bar style="thin" percent="20" text="Photoshop" bar_color="#FFDD0C" fill_color="#4AD182" text_color="#000000"]
[su_progress_bar style="thin" percent="40" text="PHP" bar_color="#FFDD0C" fill_color="#4AD182" text_color="#000000"]
[su_progress_bar style="thin" percent="60" text="WordPress" bar_color="#FFDD0C" fill_color="#4AD182" text_color="#000000"]
[su_progress_bar style="thin" percent="80" text="JavaScript" bar_color="#FFDD0C" fill_color="#4AD182" text_color="#000000"]
[su_progress_bar style="thin" percent="100" text="HTML5/CSS3" bar_color="#FFDD0C" fill_color="#4AD182" text_color="#000000"]

This shortcode is available with the Extra Shortcodes add-on.

Description

This shortcode allows you to create animated and colorful progress bars.

Options

Option namePossible valuesDefault value
style
Select progress bar style
default (Default)
fancy (Fancy)
thin (Thin)
default
percent
Specify percentage
Number from 0 to 10075
text
You can show custom text instead of percent. Leave this field empty to show the percent
Any text value– none –
bar_color
Unfilled bar background color
#HEX color#f0f0f0
fill_color
Filled bar background color
#HEX color#97daed
text_color
Select bar text color
#HEX color#555555
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –