How to insert or edit a PROGRESSIVE COUNTER on GreatPages

The progressive counter is a code you add so that a number element is displayed with a progressive counting animation inside the page.

We split the tutorial into two parts: for when you want to add a progressive counter, and for when you just want to edit an existing counter.

Editing an existing Progressive Counter on a page

1. In the text field, where the code that randomizes the counter is, you will need to edit the IDs of the text elements that contain the numbers that will be animated. To do this, click the play button to preview the page, as shown in the image below;

2. Next, right-click and select the "Inspect element" option;

3. On the right side of your screen, a panel will open where you will be able to identify this element's ID (repeat the process of identifying and copying the ID for all the numbers that will be animated);

4. Next, click the gear icon located in the top right corner of the page editor screen;

5. Click "Javascript & CSS";

6. Click the code named "Códigos de funcionamento" to edit it;

7. After that, replace all the elements inside the code that follow the "e_0000000" pattern with the IDs you copied in step 3 of the tutorial;

8. Finally, click "Salvar".

Adding a Progressive Counter to a page

1. Go to the page editor;
2. Click the gear Icon located in the top right corner of the screen;

3. Next, click "Javascript & CSS";

4. Click to "Adicionar" a new code;

5. Choose a name for your code, select the "Funcionamento" option, add the entire code below into the text field and click "Salvar";

<script>
	var contadores = $('#e_3756946, #e_3756947, #e_3756948, #e_3756949');
	function Contador() {
		if (contadores.length) {
			var janela_top = window.scrollY;
			var janela_bottom = janela_top + $(window).height();
			for (var i = 0; i < contadores.length; i++) {
				var elemento = $(contadores[i]);
				var elemento_top = elemento.offset().top;
				var elemento_bottom = elemento_top + elemento.height();
				if (elemento_bottom > janela_top && elemento_top < janela_bottom) {
					(function(index) {
						var elemento_contador = $(contadores[index]);
						contadores.splice(index, 1);
						elemento_contador.html(elemento_contador.html().replace('.', ''));
						var numero = parseInt(elemento_contador.text().match(/[0-9]+/g));
						elemento_contador.find("span").html(elemento_contador.find("span").html().replace(/[0-9]+/, 0));
						var contador = 0;
						var contar = setInterval(function() {
							contador++;
							elemento_contador.find("span").html(elemento_contador.find("span").html().replace(/[0-9]+/, contador));
							if (contador == numero) {
								clearInterval(contar);
							}
						}, (2000 / numero));
					})(i);
					Contador();
					break;
				}
			}
		}
	}
	$(document).ready(function() {
		setTimeout(function() {
			Contador();
		}, 250);
	});
	$(document).on('resize scroll', function() {
		setTimeout(function() {
			Contador();
		}, 250);
	});
</script>

6. After that, you will need to insert the counter numbers on your page. To do this, go to the icon bar located on the left side of your screen and click to add a Título element;

7. Once it is added to the page, set up the numbers you want to appear in your counter.

8. The next step is to identify the elements' IDs. To do this, click "Pré-visualizar";

9. Next, right-click and select the "Inspect element" option;

10. On the right side of your screen, a panel will open where you will be able to identify this element's ID;

11. Once that's done, copy the element ID and change it inside the code that was installed on the page, right in the spot marked below;

12. Do this same process with all the numbers you set up to run in the counter.

Still have any questions? Reach out to our support team. We're always happy to help.

Updated on: 08/01/2026