Countup
A countup element is used to display numerical data in an interesting way and make the interface more interactive.
To be able to use the countup in your application you will need to install the countup.js dependency with npm install countup.js.
Default countup
To create a countup, add data-countup to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup>30000</h1>
Duration
Set the duration to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup>30000</h1>
<h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1>
Starting value
By default the countup will start from zero. If you want to set a different start value use startVal.
You can also set the start value to be greater than the final value, so that it counts down instead of up.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>
Decimal places
Set how many decimal numbers should be displayed using decimalPlaces.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup>3.123</h1>
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
Easing
Disable easing using "useEasing": false. Easing is set to true by default, so that the animation speed changes over the course of its duration.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1>
Use grouping
Disable grouping using "useGrouping": false. Grouping is set to true by default and the default group separator is a comma.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>
Separator
You can change the default comma group separator using separator and specifying the one you wish to use.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1>
<h1 data-countup='{"separator":"-"}'>3000000</h1>
<h1 data-countup='{"separator":":"}'>3000000</h1>
Decimal separator
You can also change the decimal separator which is set to a full stop by default. To do it, use decimal and specify the decimal separator of your choice.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
Prefix
Set the countup prefix using prefix and specifying the prefix you want to add, for instance a currency symbol.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1>
<h1 data-countup='{"prefix":"£"}'>30000</h1>
Suffix
Set the countup suffix using suffix.
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup='{"suffix":"%"}'>30</h1>
<h1 data-countup='{"suffix":"‰"}'>30</h1>
<h1 data-countup='{"suffix":"k"}'>30</h1>
Of course you can mix all of these:
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/countup.js/dist/countUp.js"></script>
<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
For more advanced features of countups, click here and see what more you can do.
