Counters
Animate a number from zero (counting up towards it).
How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/appear/dist/appear.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/hs-counter/dist/hs-counter.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// INITIALIZATION OF COUNTERS
// =======================================================
$('.js-counter').each(function() {
var counter = new HSCounter($(this)).init();
});
});
</script>
Basic example
52147
Code Lines
24583
Projects
7348
Working Hours
87904
Job Offers
<div class="row text-center">
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3">52147</div>
<h4>Code Lines</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3">24583</div>
<h4>Projects</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3">7348</div>
<h4>Working Hours</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3">87904</div>
<h4>Job Offers</h4>
</div>
</div>
Comma Separated
52147
Code Lines
24583
Projects
7348
Working Hours
87904
Job Offers
<div class="row text-center">
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isCommaSeparated": true
}'>52147</div>
<h4>Code Lines</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isCommaSeparated": true
}'>24583</div>
<h4>Projects</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isCommaSeparated": true
}'>7348</div>
<h4>Working Hours</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isCommaSeparated": true
}'>87904</div>
<h4>Job Offers</h4>
</div>
</div>
Reduced to Thousand
52147
Code Lines
24583
Projects
7348
Working Hours
87904
Job Offers
<div class="row text-center">
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>52147</div>
<h4>Code Lines</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>24583</div>
<h4>Projects</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>7348</div>
<h4>Working Hours</h4>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h3"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>87904</div>
<h4>Job Offers</h4>
</div>
</div>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF COUNTER
// =======================================================
$('.js-counter').each(function() {
var counter = new HSCounter($(this)).init();
});
});
</script>