Available with Extra Shortcodes add-on.

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

75%
75%
$9
Hi!
[su_progress_pie percent="75" text="" after="%" size="200" pie_width="1" text_size="40" align="center" pie_color="#f0f0f0" fill_color="#F73F43" text_color="#cccccc"]

[su_row]
[su_column size="1/3"]
[su_progress_pie percent="75" after="%" size="180" align="center"]
[/su_column]
[su_column size="1/3"]
[su_progress_pie percent="60" text="9" before="$" size="180" pie_width="5" text_size="80" pie_color="#e0f3f8" fill_color="#e3004e" text_color="#535353" align="center"]
[/su_column]
[su_column size="1/3"]
[su_progress_pie percent="77" text="Hi!" size="180" pie_width="35" text_size="15" pie_color="#f1f1f1" fill_color="#0097fc" text_color="#0097fc" align="center"]
[/su_column]
[/su_row]
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