Progress Bar & Pie Chart

Progressbar Code

[container padding="20px 0"]
[title size="small" align="center" text_align="center" type="fancy"]Progress bar[/title]
[tm_code]
[ progressbar]
[ tm_progressbar color="FFFFFF" background_color="E76453" value="80" show_percentage="yes | no" style="1 | 2 | 3 "]
Web Development
[ /tm_progressbar ]
[ /progressbar ]
[/tm_code]
[/container]

Progressbar

[container padding="20px 0" margin="0 0 30px"]
[title size="small" type="fancy" align="center" text_align="center" type="fancy"]Style One[/title]
[tm_divider space="10px"]
[progressbar][tm_progressbar background_color="ffb718" value="80" style="1"]Web Development[/tm_progressbar][tm_progressbar background_color="ffb718" value="64" style="1"]Marketing & PR [/tm_progressbar][tm_progressbar background_color="ffb718" value="70" show_percentage="yes" style="1"]Web Designing [/tm_progressbar][tm_progressbar background_color="ffb718" value="45" style="1"]Consulting [/tm_progressbar][/progressbar]
[/container]

[container padding="20px 0" margin="0 0 30px"]
[title size="small" type="fancy" align="center" text_align="center" type="fancy"]Style Two[/title]
[tm_divider space="10px"]
[progressbar][tm_progressbar background_color="ffb718" value="80" show_percentage="no" style="2" float="left"]Web Development [/tm_progressbar][tm_progressbar background_color="ffb718" value="64" show_percentage="no" style="2"]Marketing & PR [/tm_progressbar][tm_progressbar background_color="ffb718" value="70" show_percentage="no" style="2"]Web Designing [/tm_progressbar][tm_progressbar background_color="ffb718" show_percentage="no" value="45" style="2"]Consulting [/tm_progressbar][/progressbar]
[/container]

[container padding="20px 0" margin="0 0 30px"]
[title size="small" type="fancy" align="center" text_align="center" type="fancy"]Style Three [/title]
[tm_divider space="10px"]
[progressbar][tm_progressbar background_color="ffb718" value="80" style="3" float="left"]Web Development [/tm_progressbar][tm_progressbar background_color="ffb718" value="64" style="3"]Marketing & PR [/tm_progressbar][tm_progressbar background_color="ffb718" value="70" style="3"]Web Designing [/tm_progressbar][tm_progressbar background_color="ffb718" value="45" style="3"]Consulting [/tm_progressbar][/progressbar]
[/container]

[container padding="20px 0" margin="0 0 30px"]
[title size="small" type="fancy" align="center" text_align="center" type="fancy"]Style Four [/title]
[tm_divider space="10px"]
[progressbar][tm_progressbar background_color="ffb718" value="80" style="4" float="left"]Web Development [/tm_progressbar][tm_progressbar background_color="ffb718" value="64" style="4"]Marketing & PR [/tm_progressbar][tm_progressbar background_color="ffb718" value="70" style="4"]Web Designing [/tm_progressbar][tm_progressbar background_color="ffb718" value="45" style="4"]Consulting [/tm_progressbar][/progressbar]
[/container]

Piechart Code

[container padding="20px 0"]
[title size="medium" align="center" text_align="center"]Pie Chart[/title]
[tm_code]
[ tm_piechart background_color="#E76453" percentage="15" title="Praesent magna"] CONTENTS [ /tm_piechart ]
[/tm_code]
[/container]

Pie Chart

[container padding="20px 0"]
[one_fourth content_width="90%"]
[tm_piechart background_color="#ffb718" percentage="50" title="Praesent magna"]Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.[/tm_piechart][/one_fourth]
[one_fourth content_width="90%"]
[tm_piechart background_color="#ffb718" percentage="35" title="Conse viverra"]Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.[/tm_piechart][/one_fourth]
[one_fourth content_width="90%"]
[tm_piechart background_color="#ffb718" percentage="85" title="Nunc molestie"]Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.[/tm_piechart][/one_fourth]
[one_fourth content_width="90%"]
[tm_piechart background_color="#ffb718" percentage="15" title="Magna fermen"]Nunc molestie dolor nec magna fermen atum in pharetra orci mollis. Nam tempor diam elit fermen atum in pharetra orci mollis.[/tm_piechart][/one_fourth]
[/container]