How to create an infinite counter on Squarespace
An infinite counter is a great way to add dynamic flair to your website. Whether you’re showing off milestones, simulating real-time metrics, or simply drawing attention to a fun or eye-catching number, an animated, continuously increasing counter can add movement and engagement to an otherwise static page.
In this tutorial, we’ll show you how to create an infinite counter using a small snippet of HTML, CSS, and JavaScript — all fully compatible with Squarespace 7.1 (and 7.0).
Table of Contents
Why Use an Infinite Counter?
Adding an infinite counter can help:
Simulate live data (e.g., downloads, clients served, cups of coffee 😄)
Make stats feel active and dynamic
Grab attention without distracting users
Add playful or impressive visual detail
Complexity: Easy
Step-by-Step Instructions
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 rate = 20 / (10 * 1000); // speed rate
let base = 2517773642; // initial base number
Views
Key Takeaways
Infinite counters add life to your site and draw attention to numeric elements.
They can simulate real-time stats, giving your brand a sense of momentum.
The counter can be customized with CSS and controlled via JavaScript.
Use responsibly to avoid over-animation or distracting your visitors.
FAQs
Will this affect my site speed?
No — it’s a lightweight script and runs efficiently in the background.
Can I make the counter count down or stop at a specific number?
Yes, but then it wouldn’t be infinite! 😉 You can modify the script to include limits or countdowns if needed.
Can I show multiple counters on the same page?
Yes, you can duplicate the structure with different ids and duplicate the JavaScript functions accordingly.
Conclusion
Creating an infinite counter in Squarespace is a simple yet powerful way to add motion and data-driven appeal to your website. Whether you're faking it for flair or simulating impressive growth, it’s a clever design element that takes just minutes to implement.
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 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.
