Smooth Animated Numbers with Javascript and CSS3 - odometer

File Size: 406 KB
Views Total: 41749
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smooth Animated Numbers with Javascript and CSS3 - odometer

odometer is a lightweight and themeable javascript library that makes use of CSS3 transform and transition properties to animate numbers with smooth transition effects. It can be easily integrated with JQuery javascript library to provide jQuery methods. Check the minimal demo for a quick view.

See also:

Basic Usage:

1. Include the odometer.js in your html document.

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

2. Choose and include a theme CSS file in the head section of your page. The plugin currently comes with 7 built-in themes to meet your needs. Check the themes folder in the zip for more information.

<link rel="stylesheet" href="odometer-theme-default.css" />

3. Any element with class name "odometer" will automatically be made into an Odometer! When you want to update the value, simply update it the same way you normally would.

element.innerHTML = 123 // Native, or...
$('.odometer').html(123) // with jQuery

Change log:


  • v0.4.8

This awesome jQuery plugin is developed by HubSpot. For more Advanced Usages, please check the demo page or visit the official website.