Django 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:

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

Example

Earnings

$

Customers

$

Avg. Value

$

Refund Rate

%

<div class="row">
  <div class="col-lg-3 col-6 text-center">
    <div class="border-dashed border-1 border-secondary 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-dashed border-1 border-secondary 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-dashed border-1 border-secondary 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-dashed border-1 border-secondary 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>
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);
    }
  }