4.1 KiB
title, description, menu
| title | description | menu |
|---|---|---|
| Countup | A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/) | docs.countup |
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.
{% capture code %}
30000
{% endcapture %} {% include example.html code=code %}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.
{% capture code %}
30000
30000
30000
{% endcapture %} {% include example.html code=code %}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.
{% capture code %}
30000
30000
{% endcapture %} {% include example.html code=code %}Decimal places
Set how many decimal numbers should be displayed using decimalPlaces.
{% capture code %}
3.123
3.123
3.123
3.123
{% endcapture %} {% include example.html code=code %}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.
{% capture code %}
30000
30000
{% endcapture %} {% include example.html code=code %}Use grouping
Disable grouping using "useGrouping": false. Grouping is set to true by default and the default group separator is a comma.
{% capture code %}
30000
30000
{% endcapture %} {% include example.html code=code %}Separator
You can change the default comma group separator using separator and specifying the one you wish to use.
{% capture code %}
3000000
3000000
3000000
3000000
{% endcapture %} {% include example.html code=code %}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.
{% capture code %}
3.12
3.12
3.12
3.12
{% endcapture %} {% include example.html code=code %}Prefix
Set the countup prefix using prefix and specifying the prefix you want to add, for instance a currency symbol.
{% capture code %}
30000
30000
30000
{% endcapture %} {% include example.html code=code %}Suffix
Set the countup suffix using suffix.
{% capture code %}
30
30
30
{% endcapture %} {% include example.html code=code %}Of course you can mix all of these:
{% capture code %}
64547834.76
{% endcapture %} {% include example.html code=code %}For more advanced features of countups, click here and see what more you can do.