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

Available with the Extra Shortcodes add-on.

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

Shortcode options are available from within the dashboard of your website.

Navigate to Dashboard ▸ Shortcodes ▸ Available shortcodes and select a shortcode.

Available shortcodes screen