Counters

countUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way. Read the plugin documentation

How to use

Just look at the examples:

h1.display-4.text-muted.counter#counter_1
h1.display-4.text-muted
	span.counter#counter_2
	|+
h1.display-4.text-muted.counter#counter_3
h1.display-4.text-muted.counter#counter_4

<h1 class="display-4 text-muted counter" id="counter_1">2,000</h1>
<h1 class="display-4 text-muted">
	<span class="counter" id="counter_2">52</span>+</h1>
<h1 class="display-4 text-muted counter" id="counter_3">30,000</h1>
<h1 class="display-4 text-muted counter" id="counter_4">999</h1>

// Counters
import { countUp } from '/js/countUp.js';

var counter_1 = new countUp('counter_1', 2000);
var counter_2 = new countUp('counter_2', 52);
var counter_3 = new countUp('counter_3', 30000);
var counter_4 = new countUp('counter_4', 999);

// Start when counters becomes visible
$('.counter').one('inview', function(event, isInView) {
	if (isInView) {
		counter_1.start();
		counter_2.start();
		counter_3.start();
		counter_4.start();
	} else {
		countUp.pauseResume();
	}
});

+

Version 2.0.0, [email protected]