JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<span class="counter-number percent">100</span>
<span class="counter-number">1500</span>
<span class="counter-number">12</span>
<span class="counter-number">25,40</span>
CSS
.counter-number {
display: block;
font-size: 80px;
font-weight: 700;
color: rebeccapurple;
}
JavaScript
$('.counter-number').each(function () {
var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0;
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 800,
step: function (func) {
$(this).text(parseFloat(func).toFixed(size));
}
});
});