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>
Copy

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>
Copy

More example Counter element see in here


For complete documentation read in here