[heading size="h2" style="uk-module-title"]Counter[/heading]

Use the [counter] to show a counter of numbers that starts numerating from 0 to a specified number that you set via the count_end parameter. The id can be any text but it must be unique for each counter. The duration parameter defines how long the counter should run in milliseconds. Use any icon class from this page in the icon parameter to add an icon to the counter.

[line_break/] [grid_column size="4"] [counter id="tm1" count_end="12" duration="4000" icon="chat" title="Projects done"][/counter] [counter id="tm2" count_end="65" duration="3000" icon="7s-coffee" title="Cups of coffee"][/counter] [counter id="tm3" count_end="9300" duration="2000" icon="7s-note" title="Lines of code"][/counter] [counter id="tm4" count_end="140" duration="2500" icon="area-chart" title="Web pages"][/counter] [/grid_column] [line_break/] [badge style="note"]markup[/badge] [code][counter id="tm1" count_end="12" duration="4000" icon="chat" title="Projects done"][/counter][/code] [line_break/]

To add the counter to a number, use the [counter_simple] shortcode. You can also add a percentage at the end of the number by using the tm-counter-percent class.

[line_break/] [badge style="note"]markup[/badge] [code][counter_simple id="tm5" count_end="99" duration="2500" style=""][/counter_simple][/code] [line_break/] [heading size="h3"]Example[/heading] [counter_simple id="tm6" count_end="97" duration="4000" style="tm-text-xlarge tm-counter-percent"][/counter_simple] [badge style="note"]markup[/badge] [code][counter_simple id="tm6" count_end="97" duration="4000" style="tm-text-xlarge tm-counter-percent"][/counter_simple][/code] [line_break/] [heading size="h2" style="uk-module-title"]Circle Charts[/heading]

Circle charts are a nice way to illustrate data points. Use the [chart] shortcode to generate a circle chart.

Parameters	Description
percent	Set the end percent of the chart
size	Defines the size of the chart.
border	set the width of the animated part of the chart
style	set the color of the chart. The style options are default, success, warning, danger

[badge style="note"]markup[/badge] [code] [chart percent="85" size="200" border="15" style="default"][/chart] [/code][line_break/] [grid] [column size="1-4"] [chart percent="85" size="200" border="15" style="default"][/chart] [heading size="h3" style="uk-text-center"]Skills[/heading] [/column] [column size="1-4"] [chart percent="70" size="200" border="15" style="success"][/chart] [heading size="h3" style="uk-text-center"]Design[/heading] [/column] [column size="1-4"] [chart percent="75" size="200" border="15" style="warning"][/chart] [heading size="h3" style="uk-text-center"]Photoshop[/heading] [/column] [column size="1-4"] [chart percent="90" size="200" border="15" style="danger"][/chart] [heading size="h3" style="uk-text-center"]Coding[/heading] [/column] [/grid] [line_break/] [badge style="note"]markup[/badge] [toggle_code open="false" title="Show code"][grid] [column size="1-4"] [chart percent="85" size="200" border="15" style="default"][/chart] [heading size="h3" style="uk-text-center"]Skills[/heading] [/column] [column size="1-4"] [chart percent="70" size="200" border="15" style="success"][/chart] [heading size="h3" style="uk-text-center"]Design[/heading] [/column] [column size="1-4"] [chart percent="75" size="200" border="15" style="warning"][/chart] [heading size="h3" style="uk-text-center"]Design[/heading] [/column] [column size="1-4"] [chart percent="90" size="200" border="15" style="danger"][/chart] [heading size="h3" style="uk-text-center"]Design[/heading] [/column] [/grid][/toggle_code]