JSFiddle - React, Tailwind, and code Playground
HTML
<div id="odo1" class="odometer">12345</div>
CSS
</style><!-- This closes the open style tag above. Just a jsFiddle thing. Please ignore. -->
<!-- Odometr includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-car.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<!-- Extra styles for this example -->
<style>
.odometer {
font-size: 100px;
}
JavaScript
window.odometerOptions = {
auto: false, // Don't automatically initialize everything with class 'odometer'
format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
duration: 3000, // Change how long the javascript expects the CSS animation to take
// theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
animation: 'count' // Count is a simpler animation method which just increments the value,
// // use it when you're looking for something more subtle.
};
var value = 10000;
var odo =
new Odometer({
el: $("#odo1").get(0),
// Any option (other than auto and selector) can be passed in here
format: '(\'ddd),dd',
theme: 'slot-machine',
value: value
});
$(function() {
refresh();
function refresh()
{
value += Math.random() * 0.1 + 0.02;
odo.update(value);
setTimeout(refresh, 5000);
}
});