[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"]
This shortcode is available in Shortcodes Ultimate Pro
This shortcode allows you to create animated and colorful progress bars.
| 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 – |