Available with Extra Shortcodes add-on.

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

WordPress
PHP
Photoshop
Photoshop
PHP
WordPress
Photoshop
PHP
WordPress
JavaScript
HTML5/CSS3
[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"]

[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"]

[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"]
Option name Possible values Default value
style
Select progress bar style
default (Default)
fancy (Fancy)
thin (Thin)
default
percent
Specify percentage
Number from 0 to 100 75
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