Call volume counter - with on scroll animation. Customize for the type and color. Customer updates the data targets
<iframe title="call counter"
srcdoc="
<style>
@import url('https://fonts.googleapis.com/css2?family=Maleropa:wght@400;700&display=swap');
body {
margin: 0;
font-family: 'Maleropa', sans-serif;
background-color: transparent;
}
.counter-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
justify-items: center;
align-items: center;
padding: 20px;
background-color: #fff;
position: relative;
max-width: 800px;
margin: 40px auto;
border-radius: 16px;
border: 1px solid #ddd;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.counter {
font-size: 2em;
font-weight: bold;
font-family: 'Maleropa', sans-serif;
}
.fire .counter {
color: #AA3D1D;
}
.ems .counter {
color: #1C0F40;
}
.msar .counter {
color: #2E8B57;
}
.other .counter {
color: #383838;
}
.total .counter {
color: #000 !important;
}
h2 {
font-size: 1.5em;
margin: 0.3em 0 0;
color: #444;
}
</style>
<div class='counter-container'>
<div class='fire' style='text-align: center;'>
<div class='counter' data-target='33'>0</div>
<h2>Fire</h2>
</div>
<div class='ems' style='text-align: center;'>
<div class='counter' data-target='790'>0</div>
<h2>EMS</h2>
</div>
<div class='msar' style='text-align: center;'>
<div class='counter' data-target='24'>0</div>
<h2>MSAR</h2>
</div>
<div class='other' style='text-align: center;'>
<div class='counter' data-target='460'>0</div>
<h2>Other</h2>
</div>
<div class='total' style='text-align: center;'>
<div class='counter' data-target='1307'>0</div>
<h2>Total</h2>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const counters = document.querySelectorAll('.counter');
const animationDuration = 3500;
counters.forEach(counter => {
const target = +counter.getAttribute('data-target');
const increment = target / (animationDuration / 50);
let currentValue = 0;
const updateCounter = () => {
currentValue += increment;
if (currentValue < target) {
counter.textContent = Math.ceil(currentValue);
setTimeout(updateCounter, 50);
} else {
counter.textContent = target;
}
};
updateCounter();
});
});
</script>
"
style="border: none; width: 100%; max-width: 820px; height: 300px; display: block; margin: 0 auto;"
></iframe>