simple-odometer

JS Odometer

A simple js odometer for animating numbers.

See src/index.html for demo

Install via npm

npm install simple-odometer

import "simple-odometer/src/js/odometer.js";

import "simple-odometer/src/css/odometer.css";

Or just link them

<link rel="stylesheet" href="simple-odometer/src/js/odometer.css">

<script src="simple-odometer/src/js/odometer.js"></script>

Your HTML

<span id="odometer">0</span>
<button id='animate'>Animate</button>

Configuration

window.odometerOptions = {
    format: '(,ddd).dd',
    duration: 2000,
}

Your event handler:

const button = document.querySelector('#animate');
button.onclick = () => {
    // Target the element to animate
    const target_elem = document.querySelector('#odometer');

    // Create na instance
    const OdoInstance = new Odometer({
        // pass the element ref
        el: target_elem,

        // Old value to animate from
        value: target_elem.innerHTML
    });

    // Finally, give it a new value to animate to
    OdoInstance.update(Math.random() * 1000); // new value
}