JSFiddle - React, Tailwind, and code Playground
HTML
<p>Animating Odomoter from <strong>$000.00</strong> to <strong>$012.30</strong>
<div id="odometer" class="odometer">100.01</div>
CSS
</style><!-- This closes the open style tag above. Just a jsFiddle thing. Please ignore. -->
<!-- Odometer includes -->
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-minimal.css" />
<script>
window.odometerOptions = {
format: '(,dd).ddd'
};
</script>
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<!-- Extra styles for this example -->
<style>
.odometer {
font-size: 100px; /* big */
color: #27B157 /* money */
}
/* Show a $ sign before the number */
.odometer .odometer-inside:before {
content: "$";
display: inline-block;
vertical-align: sup;
opacity: .6;
font-size: .85em;
margin-right: .12em
}
/* Hide the first digit, first formatting comma, and last digit */
.odometer .odometer-inside .odometer-digit:nth-child(1),
.odometer .odometer-inside .odometer-formatting-mark:nth-child(2),
.odometer .odometer-inside .odometer-digit:last-child {
display: none
}
JavaScript
setTimeout(function(){
odometer.innerHTML = 12.09;
}, 1000);