Increase Number And/Or Element When Visible – counter.js

An increasing counter JavaScript plugin for animating a number or increasing the width of an element as it becomes visible in the viewport.

How to use it:

1. Download and insert the counter.min.js script into the document.

<script src="./counter.min.js"></script>

2. Count up a number in an animated way.

<p id="example" data-counter-target="1000">
  10
</p>

new Counter('#example');

3. Create a ‘bar’ style counter that increases the width of a DIV element at a given speed.

<div id="example"></div>

new Counter('#example', {
    target: 100,
    type: 'bar',  
});

4. Available counter options.

new Counter('#example', {
    origin: 0,
    target: 100,
    type: 'numeric', // 'numeric', 'bar', 'both'
    duration: 1500,
    suffix: null,
    classes: {
      bar: 'counter-bar',
      number: 'counter-number'
    } ,
    format: function(value) {}
});

5. You can also pass the options via HTML data attributes:

<div id="example" 
     data-counter-origin="10" 
     data-counter-target="100" 
     data-counter-type="bar" 
     data-counter-duration="3000">
</div>

Changelog:

01/01/2025

• add option for format callback