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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/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/core@1.0.0-beta17/dist/libs/countup.js/dist/countUp.js"></script>

<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>