[su_progress_pie percent="75" text="" after="%" size="200" pie_width="10" text_size="40" align="center" pie_color="#7ce2f7" fill_color="#F73F43" text_color="#F73F43" align="none"]
[su_row] [su_column size="1/3"] [su_progress_pie percent="75" after="%" size="180" pie_color="#b9e092" fill_color="#4dd100" text_color="#4dd100" align="center"] [/su_column] [su_column size="1/3"] [su_progress_pie percent="63" text="9" before="$" size="180" pie_width="8" text_size="80" pie_color="#e0f3f8" fill_color="#e3004e" text_color="#e3004e" align="center"] [/su_column] [su_column size="1/3"] [su_progress_pie percent="77" text="Hi!" size="180" pie_width="35" text_size="21" pie_color="#f1f1f1" fill_color="#0097fc" text_color="#0097fc" align="center"] [/su_column] [/su_row]
This shortcode is available in Shortcodes Ultimate Pro
This shortcode allows you to create beautiful progress pies. You can adjust the percentage, set custom text and colors.
| Option name | Possible values | Default value |
|---|---|---|
| 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 – |
| before This content will be shown before the percent | Any text value | – none – |
| after This content will be shown after the percent | Any text value | – none – |
| size Pie size (pixels) | Number from 20 to 1200 | 200 |
| pie_width Pie border width (percents) | Number from 0 to 100 | 30 |
| text_size Pie text size (pixels) | Number from 10 to 120 | 40 |
| align Pie alignment | none (None) left (Left) center (Center) right (Right) | center |
| pie_color Unfilled pie background color | #HEX color | #f0f0f0 |
| fill_color Filled pie background color | #HEX color | #97daed |
| text_color Select pie text color | #HEX color | #cccccc |
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |