Counter
Use the tm-counter class to show a counter of numbers that starts numerating from 0 to a specified number that you set via the data-end attribute. The id can be any text but it must be unique for each counter. The data-duration attribute defines how long the counter should run in milliseconds. Use any icon class from this page to add an icon to the counter.
12
Projects done
65
Cups of coffee
9300
Lines of code
140
Web pages
markup
<div class="tm-counter uk-flex" data-uk-scrollspy="{cls:'uk-animation-fade', delay:100}">
<div class="tm-counter-icon uk-flex-item-none">
<i class="uk-icon-7s-plugin"></i>
</div>
<div class="tm-counter-content uk-flex-item-1">
<h2 class="tm-counter-number" data-duration="4000" data-end="12" id="tm1">12</h2>
<h3 class="tm-counter-title">Projects done</h3>
</div>
</div>
To add the counter to a number, use the tm-counter class. You can also add a percentage at the end of the number by using the tm-counter-percent class.
97
markup
<div class="tm-counter uk-flex" data-uk-scrollspy="{cls:'uk-animation-fade', delay:100}">
<div class="tm-counter-simple uk-flex-item-1">
<h2 class="tm-counter-number tm-text-xlarge tm-counter-percent" id="tm6" data-end="97" data-duration="4000">97</h2>
</div>
</div>
Circle charts
Circle charts are a nice way to illustrate data points. Use the tm-chart-default class 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 |
markup
<div class="tm-chart-default"><div data-uk-circle-chart="{maxPercent:85,size:200,border:15}"></div></div>
Skills
Design
Photoshop
Coding
Show code
<div class="uk-grid" data-uk-grid-margin="">
<div class="uk-width-medium-1-4">
<div class="tm-chart-default">
<div data-uk-circle-chart="{maxPercent:85,size:200,border:15}"></div>
</div>
<h3 class="uk-text-center">Skills</h3>
</div>
<div class="uk-width-medium-1-4">
<div class="tm-chart-success">
<div data-uk-circle-chart="{maxPercent:70,size:200,border:15}"></div>
</div>
<h3 class="uk-text-center">Design</h3>
</div>
<div class="uk-width-medium-1-4">
<div class="tm-chart-warning">
<div data-uk-circle-chart="{maxPercent:75,size:200,border:15}"></div>
</div>
<h3 class="uk-text-center">Photoshop</h3>
</div>
<div class="uk-width-medium-1-4">
<div class="tm-chart-danger">
<div data-uk-circle-chart="{maxPercent:90,size:200,border:15}"></div>
</div>
<h3 class="uk-text-center">Coding</h3>
</div>
</div>
