Bootstrap CountUp JS

Pro Component

CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.

Usage

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

Copy

<script src="../../assets/js/plugins/countup.min.js"></script>

Example

Earnings

$ 23,980

Customers

$ 2,400

Avg. Value

$ 48

Refund Rate

4 %

Copy

<div class="row">
  <div class="col-lg-3 col-6 text-center">
    <div class="border border-light border-1 border-radius-md py-3">
      <h6 class="text-primary text-gradient mb-0">Earnings</h6>
      <h4 class="font-weight-bolder"><span class="small">$ </span><span id="state1" countTo="23980"></span></h4>
    </div>
  </div>
  <div class="col-lg-3 col-6 text-center">
    <div class="border border-light border-1 border-radius-md py-3">
      <h6 class="text-primary text-gradient mb-0">Customers</h6>
      <h4 class="font-weight-bolder"><span class="small">$ </span><span id="state2" countTo="2400"></span></h4>
    </div>
  </div>
  <div class="col-lg-3 col-6 text-center mt-4 mt-lg-0">
    <div class="border border-light border-1 border-radius-md py-3">
      <h6 class="text-primary text-gradient mb-0">Avg. Value</h6>
      <h4 class="font-weight-bolder"><span class="small">$ </span><span id="state3" countTo="48"></span></h4>
    </div>
  </div>
  <div class="col-lg-3 col-6 text-center mt-4 mt-lg-0">
    <div class="border border-light border-1 border-radius-md py-3">
      <h6 class="text-primary text-gradient mb-0">Refund Rate</h6>
      <h4 class="font-weight-bolder"><span id="state4" countTo="4"></span><span class="small"> %</span></h4>
    </div>
  </div>
</div>

Copy

if (document.getElementById('state1')) {
    const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo"));
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
  if (document.getElementById('state2')) {
    const countUp = new CountUp('state2', document.getElementById("state2").getAttribute("countTo"));
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
  if (document.getElementById('state3')) {
    const countUp = new CountUp('state3', document.getElementById("state3").getAttribute("countTo"));
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
  if (document.getElementById('state4')) {
    const countUp = new CountUp('state4', document.getElementById("state4").getAttribute("countTo"));
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }