Blog

22 de June de 2023

Animated Counter

Contador Animado

To place an animated counter we will use HTML with JavaScript, remembering that later you can style it the way you want.

	<!-- HTML -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div><span class="counter-up" data-count-to="5684"></span>,<span class="counter-up" data-count-to="51"></span></div>
	<div><span class="counter-up" data-count-to="6603146"></span></div>
	<div><span class="counter-up" data-count-to="20362"></span></div>
	<!-- JavaScript -->
	<script type="text/javascript">
		const tempo_intervalo = 5;
		const tempo = 4000;

		$('.counter-up').each(function() {  
	  		let contar_ate = parseInt($(this).data('countTo'));
	  		let intervalos = tempo / tempo_intervalo;
	  		let incremento = contar_ate / intervalos;
	  		let valor = 0;
	  		let el = $(this);
	  
	  		let timer = setInterval(function() {
	    			if (valor >= contar_ate){
	      				valor = contar_ate;
	      				clearInterval(timer);
	    			}
	    
				let texto = valor.toFixed(0).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
	    			el.text(texto);
	    			valor += incremento;      
	  		}, tempo_intervalo);
		});
	</script>
Share:
Others

Tips

ShadowBox

ShadowBox

View more

Variáveis CSS

CSS Variables

View more

O que é Senha Forte?

What is Strong Password?

View more