How to create multiple instances of the infinite counter on Squarespace
This tutorial demonstrates how to create multiple instances of infinite counters on your Squarespace webpage, serving as an update to the blog titled 'How to Create an Infinite Counter on Squarespace' Ideal for showcasing service metrics, this update enhances client engagement by providing dynamic counters for real-time progress tracking.
Step 1
On the page you want the infinite counter to be visible, add the code blocks to insert the html code below.
<div class="main_container" id="id_main_container1"> <div class="counter" id="id_counter1"> </div> <p class="view">Electricity Supplied (kWh)</p> </div> <div class="main_container" id="id_main_container2"> <div class="counter" id="id_counter2"> </div> <p class="view">Natural Gas Supplied (GJ)</p> </div>
Please NOTE the id you will need to change the value for the number of infinite counters. For this example we are using two counters so the id are “id_main_container1” and “id_main_container2”.
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: 500px;
background-color: #555555;
align-content: center;
}
.counter {
height: auto;
border: none;
background-color: white;
max-width: 480px;
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>
function startCounter(id, startDate, initialBase) {
let start = new Date(startDate); // date
let rate = 20 / (10 * 1000); // speed rate
let base = initialBase; // initial base number
setInterval(function () {
let views = Math.floor((new Date() - start) * rate) + base;
let givenNumber = views;
document.getElementById(id).innerHTML = givenNumber.toLocaleString('en-US'); // pass views
}, 250); // update every .25 of a second
}
// Example usage:
startCounter('id_counter1', '2022-01-07', 25177736420);
startCounter('id_counter2', '2022-01-07', 2517773642);
// Add more instances as needed
</script>Step 3
Note: Finally you will need to change the rate to values suitable for your counter rate.
let rate = 20 / (10 * 1000); // speed rate
Lastly, for the instances you need to add the id, start date and base number.
startCounter('id_counter1', '2022-01-07', 25177736420);
startCounter('id_counter2', '2022-01-07', 2517773642);
Electricity Supplied (kWh)
Natural Gas Supplied (GJ)
Conclusion
See other related blogs
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 in this agreement, 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, we recommend that you purchase the services of a developer.
