Progress Pie

Color options

[su_progress_pie pie_color="#fbcfff" fill_color="#a100c9" text_color="#a100c9"]

[su_progress_pie pie_color="#ffd973" fill_color="#ff7a73" text_color="#ff7a73"]

[su_progress_pie pie_color="#b8ffb0" fill_color="#17e300" text_color="#12b000"]

Sizing options

[su_progress_pie size="100" pie_width="10" text_size="21"]

[su_progress_pie size="200" pie_width="20" text_size="36"]

[su_progress_pie size="300" pie_width="30" text_size="48"]

Text & Percent options

Total

[su_progress_pie text="Total"]

45%

[su_progress_pie percent="45" after="%"]

$99

[su_progress_pie text="99" percent="75" before="$"]

Align option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mi, laoreet vitae libero vel, lacinia consequat arcu. Cras vel mauris a augue tristique elementum in eu nulla. Donec scelerisque nibh nec mi gravida fermentum. Fusce laoreet dignissim mi ut molestie. Quisque in pellentesque lorem. Duis id felis vitae felis tincidunt interdum vitae id tortor. Suspendisse erat lectus, venenatis a blandit in, ullamcorper eget nunc

Get the code

[su_progress_pie align="left"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mi, laoreet vitae libero vel, lacinia consequat arcu. Cras vel mauris a augue tristique elementum in eu nulla. Donec scelerisque nibh nec mi gravida fermentum. Fusce laoreet dignissim mi ut molestie. Quisque in pellentesque lorem. Duis id felis vitae felis tincidunt interdum vitae id tortor. Suspendisse erat lectus, venenatis a blandit in, ullamcorper eget nunc

Vivamus rhoncus tincidunt facilisis. Vestibulum ac justo eu magna vulputate dictum eu at tortor. Aliquam pulvinar dui felis, sed blandit mauris venenatis quis. Nullam eu arcu bibendum, euismod dolor non, fringilla lacus. Maecenas vitae tempor enim. Pellentesque sodales erat ut mauris congue interdum. Praesent molestie, dolor vitae accumsan maximus, odio dui efficitur mi, sit amet rhoncus ante dolor vitae urna. Mauris sit amet eros sed lacus efficitur rhoncus in vel lorem.

Get the code

[su_progress_pie align="right"]

Vivamus rhoncus tincidunt facilisis. Vestibulum ac justo eu magna vulputate dictum eu at tortor. Aliquam pulvinar dui felis, sed blandit mauris venenatis quis. Nullam eu arcu bibendum, euismod dolor non, fringilla lacus. Maecenas vitae tempor enim. Pellentesque sodales erat ut mauris congue interdum. Praesent molestie, dolor vitae accumsan maximus, odio dui efficitur mi, sit amet rhoncus ante dolor vitae urna. Mauris sit amet eros sed lacus efficitur rhoncus in vel lorem.

Combined with columns

Get the code

[su_row]
[su_column size="1/3"]
[su_progress_pie pie_color="#fbcfff" fill_color="#a100c9" text_color="#a100c9"]
[/su_column]
[su_column size="1/3"]
[su_progress_pie pie_color="#ffd973" fill_color="#ff7a73" text_color="#ff7a73"]
[/su_column]
[su_column size="1/3"]
[su_progress_pie pie_color="#b8ffb0" fill_color="#17e300" text_color="#12b000"]
[/su_column]
[/su_row]