Documentation

Browse source code
On this page

Countup

Countups with many options that can be found here

To make countup add data-countup to any html text tag.

Default countup

Set number to count up.

30000

<h1 data-countup>30000</h1>

Duration

Set the duration of the countup. (2s is set by default)

30000

30000

30000

<h1 data-countup>30000</h1>
<h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1>

Starting value

Set the start value of countup using startVal. If you set it bigger than the count, countup will run reverse.

30000

30000

<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>

Decimal places

Set how many decimal places to show using decimalPlaces.

3.123

3.123

3.123

3.123

<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. (true by default)

30000

30000

<h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1>

Use grouping

Disable grouping using "useGrouping": false. (true by default)

30000

30000

<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>

Separator

Set seperator that seperates groups using separator. (, by default)

3000000

3000000

3000000

3000000

<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

Set decimal separator using decimal. (. by default)

3.12

3.12

3.12

3.12

<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 countup prefix using prefix.

30000

30000

30000

<h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1>
<h1 data-countup='{"prefix":"£"}'>30000</h1>

Suffix

Set countup suffix using suffix.

30

30

30

<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:

64547834.76

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

To do more advanced stuff with countups go here to check how it’s done.