Odometer a helpful plugin to play with numbers in UI

Posted By : Sachin Arora | 30-Apr-2018

The odometer is a javascript and css library to create creative and smooth transitions on numbers. It can be used to create attractive user interfaces and rather than showing the numbers directly on your web page we can use the odometer to show the smooth transitions on numbers with different design and patterns.

Odometer handles all the animations entirely by 
css by using transform property making it extremely performant, with automatic fallback on older browsers. odometer library and it's largest theme is less than 3kb when compressed and all the themes can be resized by just setting the font-size property in css on our .odometer selector. 

How To Use

It is very easy to use odometer as you just need to include a javascript and a theme CSS file on your web page. After that just add .odometer class to any numbers which you would like to animate on the change that's it and you are done.

 

<link rel="stylesheet" href="odometer-theme-car.css" />
<script src="odometer.js"></script>

Any element on which you specify the class "odometer" will automatically be made intoOdometer, so the thing is how to update the value, there no change in that you can do it like you normally do to update any data.
 
element.innerHTML = 123 // Native, or...
$('.odometer').html(123) // with jQuery


Example: 

In Your HTML you just need to provide a .odometer class to your numbers div like: 

 

<div id="odometer" class="odometer">123</div>

Include the js and css for odometer 

 
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

Soyour  odometer has been successfully added now you just need to update the numbers to show the smoothing animations
setTimeout(function(){
    odometer.innerHTML = 456;
}, 1000);

So , when the numbers are updated it creates the animation while changing the numbers. We can also modify it by adding extra custom css according to our need.
.odometer {
    font-size: 100px;
}

 

About Author

Author Image
Sachin Arora

Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .

Request for Proposal

Name is required

Comment is required

Sending message..