How to create an infinite counter on Squarespace

This tutorial will show you how to create an infinite counter on your Squarespace website. This is 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 copy 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, expressed 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.