Counters

Animate a number from zero (counting up towards it).

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.counter.js plugi.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/appear.js"></script>

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

<script src="../../assets/js/components/hs.counter.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
    var counters = $.HSCore.components.HSCounter.init('[class*="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 h3">52147</div>
    <h4 class="h6">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 class="h6">Projects</h4>
  </div>

  <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
    <div class="js-counter h3">7348</div>
    <h4 class="h6">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 class="h6">Job Offers</h4>
  </div>
</div>

Objects

bounds: -100 - integer
debounce: 10 - integer
time: 6000 - integer
fps: 60 - integer
commaSeparated: false - boolean

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-comma-separated="".

Attributes	Description
`data-comma-separated`	If `true`, substitutes a comma after a thousandth.
`data-reduce-thousands`	Postfix after digital value.