Skip to main content

Counter Up2

A lightweight module that counts up to a targeted number when the number becomes visible.

Installation

Add script right before closing </body> tag, and initialize Counter Up2. Counter Up2 required to install Waypoints Js

            
              <!-- Plugin js -->
              <script src="src/plugins/waypoints/lib/noframework.waypoints.min.js"></script>
              <script src="src/plugins/counterup2/dist/index.js"></script>

              <!-- Theme js -->
              <script src="src/js/theme.js"></script>

If you want to remove Counter js editing theme.js in this function myCounters();


Example


1500+
Customers
250+
Company
520+
Project
450+
Complete


How to use

You can use counter up animation with add this counter classes

            
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6">
                  <div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
                    <div class="display-4 text-primary mb-1">
                      <span class="counter">1500</span><span class="small">+</span>
                    </div>
                    <small class="d-block text-uppercase text-primary">Customers</small>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                  <div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
                    <div class="display-4 text-primary mb-1">
                      <span class="counter">250</span><span class="small">+</span>
                    </div>
                    <small class="d-block text-uppercase text-primary">Company</small>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                  <div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
                    <div class="display-4 text-primary mb-1">
                      <span class="counter">520</span><span class="small">+</span>
                    </div>
                    <small class="d-block text-uppercase text-primary">Running Project</small>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                  <div class="p-4 bg-white rounded shadow-sm position-relative mb-4 mb-lg-0">
                    <div class="display-4 text-primary mb-1">
                      <span class="counter">450</span><span class="small">+</span>
                    </div>
                    <small class="d-block text-uppercase text-primary">Complete Project</small>
                  </div>
                </div>
              </div>

More example Counter element see in here


For complete documentation read in here