Odometer

GitHub ★ s so far: 0

Star odometer on GitHub to to see it update.

Odometer is a Javascript and CSS library for smoothly transitioning numbers. See the demo page for some examples.

Odometer's animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers.

The library and largest theme is less than 3kb when minified and compressed.

All of the themes can be resized by setting the font-size of the .odometer element.

Usage

The simplest possible usage is just including the javascript and a theme css file on your page. Add the odometer class to any numbers you'd like to animate on change. You're done.

Just set the innerHTML , innerText , or use jQuery's .text() or .html() methods to change their contents, and the animation will happen automatically. Any libraries you're using to update their value, provided they don't update by erasing and rerendering the odometer element, will work just fine.

On older browsers, it will automatically fallback to a simpler animation which won't tax their fragile javascript runtime.

Example

123

Play with this simple example on jsFiddle.

Advanced

You can set options by creating a odometerOptions object:

window.odometerOptions = { auto: false , selector: '.my-numbers' , format: '(,ddd).dd' , duration: 3000 , theme: 'car' , animation: 'count' };

You can manually initialize an odometer with the global Odometer :

var el = document.querySelector( '.some-element' ); od = new Odometer({ el: el, value: 333555 , format: '' , theme: 'digital' }); od.update( 555 ) el.innerHTML = 555

Format

The format option allows you to configure how the digit groups are formatted, and how many digits are shown after the decimal point.

- , - , , , . - , , . . , - . . , , - , -

Browser Support

Odometer is intended to support IE8+, FF4+, Safari 6+, and Chrome.

Dependencies

None!

Contributing

Odometer is built using Grunt. To setup the build environment you first must have Node.js installed. Then:

npm install

To build the project:

grunt

To have it watch for changes and build automatically:

grunt watch

We welcome pull requests!