Counter
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="../node_modules/appear/dist/appear.min.js"></script>
<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>
(function() {
// INITIALIZATION OF COUNTER
// =======================================================
new HSCounter('.js-counter')
})();
</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 h1 mb-1">52147</div>
<span>Code Lines</span>
</div>
<!-- End Col -->
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1">24583</div>
<span>Projects</span>
</div>
<!-- End Col -->
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1">7348</div>
<span>Working Hours</span>
</div>
<!-- End Col -->
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1">87904</div>
<span>Job Offers</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
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 h1 mb-1"
data-hs-counter-options='{
"isCommaSeparated": true
}'>52147</div>
<span>Code Lines</span>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1"
data-hs-counter-options='{
"isCommaSeparated": true
}'>24583</div>
<span>Projects</span>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1"
data-hs-counter-options='{
"isCommaSeparated": true
}'>7348</div>
<span>Working Hours</span>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1"
data-hs-counter-options='{
"isCommaSeparated": true
}'>87904</div>
<span>Job Offers</span>
</div>
</div>
<!-- End Row -->
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 h1 mb-1"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>52147</div>
<span>Code Lines</span>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>24583</div>
<span>Projects</span>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>7348</div>
<span>Working Hours</span>
</div>
<div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
<div class="js-counter h1 mb-1"
data-hs-counter-options='{
"isReduceThousandsTo": true
}'>87904</div>
<span>Job Offers</span>
</div>
</div>
<!-- End Row -->
Methods
| Parameters | Description | Default value |
|---|---|---|
isCommaSeparated
|
If true, then substitute a comma after thousandths |
false
|
isReduceThousandsTo
|
Postfix after numerical value |
false
|