I have set up a counter section where the numbers go from 0 to a specific value. However, currently all three counters start counting simultaneously.
Is there a way for the first counter to count up first, then once it's done, move on to the second counter, and so on? Essentially, each counter should count up one by one in sequence.
To see the project I created, visit this link.
.counts {
padding: 70px 0 60px;
}
.counts .count-box {
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
background: #f1f6fe;
}
.counts .count-box i {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
background: #106eea;
color: #fff;
width: 56px;
height: 56px;
line-height: 0;
border-radius: 50px;
border: 5px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.counts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #062b5b;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 14px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1d98c5827e8c582edfcf80de605af4dbe99cbff4fbe9fbffeacbc2edbe97ecdbe19788fda79e93ba97b89791bdeaa1eda19fd3979d8dc6bbbdb097f29d959dd997928aaeb65acbf29504edbcd99beb3cdb3d67aabMarTbad88199ef86838aff8c83dc838ddf81808293959AD58c85808cff8cff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9cedfd5d9d8c5f68498869881">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
<section id="counts" class="counts">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="count-box">
<i class="bx bx-user"></i>
<span data-purecounter-start="0" data-purecounter-end="100" class="purecounter"></span>
<p>Counter 1</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-md-0">
<div class="count-box">
<i class="bx bxl-bitcoin"></i>
<span data-purecounter-start="0" data-purecounter-end="10036" class="purecounter"></span>
<p>Counter 2</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-lg-0">
<div class="count-box">
<i class="bx bx-server"></i>
<span data-purecounter-start="0" data-purecounter-end="1000" class="purecounter"></span>
<p>Counter 3</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@srexi/purecounterjs/dist/purecounter_vanilla.js"></script>