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

75%

$9

Hi!
[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 with the Extra Shortcodes add-on.

Description

This shortcode allows you to create beautiful progress pies. You can adjust the percentage, set custom text and colors.

Options

Option namePossible valuesDefault value
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 –
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 1200200
pie_width
Pie border width (percents)
Number from 0 to 10030
text_size
Pie text size (pixels)
Number from 10 to 12040
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 –