Progress Bar / Pie

The Progress Bar / Pie shortcode for WordPress can be used to display one or multiple progress bars or progress pies inside the content, visually presenting a project’s progress. Check below for example implementations and shortcode documentation:

Progress Bar / Pie Examples

Pie Example
45%
Bar Example
75%

Progress Bar / Pie Shortcodes

Progress Bar / Pie Shortcode
[x3m-progress type="pie" text="Pie Example" percent="45" color="green" background="lightgrey" size="150px" style="2"]
[x3m-progress type="bar" text="Bar Example" percent="75" color="yellow" background="lightgrey" size="100%" style="1"]
The shortcode can be used to display a progress bar or progress pie to show completion of tasks or projects. Above example displays both a progress pie and a progress bar using 2 shortcodes.

Progress Bar / Pie Documentation

Here are the shortcode option settings available for Progress Bar / Pie:

Shortcode Settings Details
type=”bar” used to set the chart type:
– “bar” used to display progress bar
– “pie” used to display progress pie
text=”Title Here” used to set the chart title
percent=”75″ used to set the progress in percentage
color=”yellow” used to set the color for completion display

Color names or HEX color codes can be used to set the desired color.

background=”lightgrey” used to set the color for bar/pie background.

Color names or HEX color codes can be used to set the desired color.

size=”150px” used to set the width size for bar/pie chart.

Can be used values in pixels (ex “150px”) or percentage (ex “100%”).

style=”1″ used to set the design style to be displayed.

There are 3 styles: “1”, “2” and “3”.