Counter
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.
12
Projects done
65
Cups of coffee
9300
Lines of code
140
Web pages
[counter id="tm1" count_end="12" duration="4000" icon="icon-7s-plugin" title="Projects done"][/counter]
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.
[counter_simple id="tm5" count_end="99" duration="2500" style=""][/counter_simple]
Example
97
[counter_simple id="tm6" count_end="97" duration="4000" style="tm-text-xlarge tm-counter-percent"][/counter_simple]
For very large numbers, use the [counter_start] shortcode. This shortcode allows you to specify the start number in the count. In some cases, the [counter] shortcode could show different end values for large numbers. With the [counter_start] you can specify a small margin between the start and end number of a large number
[counter_start id="tm7" count_start="1999995" count_end="2000000" duration="1000" icon="icon-7s-graph2" title="Lines of code"][/counter_start]
Example
{number}
Lines of code
Circle Charts
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 |
[chart percent="85" size="200" border="15" style="default"][/chart]
Skills
Design
Photoshop
Coding
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]