How to create an infinite counter on Squarespace

This tutorial will show you how to create an infinite counter on your Squarespace website. This particularly useful if you want a counter for a service provided for your client to see.

Complexity: Easy

---

Step 1

On the page you want the infinite counter to be visible, add a code block to insert the html code below.

<div class="main_container" id="id_main_container">
      <div class="counter" id="id_counter">
      </div>
      <p class="view"> Views </p>
</div>

---

Step 2

On the page menu, click on the page gear icon and select the ‘Advanced’ selection. and cope and paste the code below.

<style>
.main_container {
  height: auto;
  width: auto;
  padding: 3px;
  margin: 2px;
  max-width: 300px;
  background-color: #555555;;
  align-content: center;
}
.counter {
  height: auto;
  border: none;
  background-color: white;
  max-width: 290px;
  vertical-align: center;
  padding-top: 3px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
.view {
  height: 16px;
  width: auto;
  padding-bottom: 10px;
  margin: 2px;
  background-color: transparent;
  text-align: center;
  color:#fff;
}
</style>

<!--- infinite counter on Squarespace --->
<!--- Copyright Primitius Consultancy [https://primitusconsultancy.co.uk] --->
<script>
let start = new Date(2022, 0, 7);  // date
let rate = 20 / (10 * 1000); // speed rate
let base = 2517773642;  // initial base number

setInterval(function () {
    let views = Math.floor((new Date() - start) * rate) + base;
    let givenNumber = views;
    id_counter.innerHTML= givenNumber.toLocaleString('en-US'); // pass views
}, 250); // update every .25 of a second
</script>
<!--- End infinite counter on Squarespace  --->

---

Step 3

Note: finally you will need to change the start date, rate and base number to values suitable for your counter rate.

let start = new Date(2022, 0, 7); // date
let rate = 20 / (10 * 1000); // speed rate
let base = 2517773642; // initial base number

Views

See other related blogs

• Elevate Your Website with Infinite Counters: A Brief Overview

• How to create multiple instances of the infinite counter on Squarespace

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.