# 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);
        }
      }