Odometer a helpful plugin to play with numbers in UI
Posted By : Sachin Arora | 30-Apr-2018
The odometer is a javascript and
Odometer handles all the animations entirely by
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
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
setTimeout(function(){
odometer.innerHTML = 456;
}, 1000);
.odometer {
font-size: 100px;
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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 .