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="./node_modules/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>
                    
                  

JavaScript behavior

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>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-counter-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-counter-options='{}'

Attributes Description

isCommaSeparated

If true, then substitute a comma after thousandths

isReduceThousandsTo

Postfix after numerical value