Counter

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.

Please Note: we already added plugin CSS and JS file in vendors.bundle.{css/js}. you can exclude it by using gulp task. you also can add them manually if you want.

How it works

.counter init the counter. There are two main approaches to using this plugin: through data attributes on DOM nodes, and through JS options explicitly passed to the countTo function. These two methods can be mixed and matched as well. Data attributes takes precedence over JS options.

This approach allows you to define data-* attributes on whatever DOM element will act as a container for your counter. This is useful when you already know the values at the time that you are constructing the DOM. 

<span class="counter" data-from="0" data-to="100"
data-speed="5000" data-refresh-interval="50"></span>

$260

<h2><span class="counter" data-to="1280">260</span></h2>

1204

Happy Customers

k

Line of code

Projects Done

Deploy Package 

<div class="container">
<div class="row">

  <div class="col-lg-3 col-sm-6 mt-5">
    <div class="media">
      <span class="iconbox iconbox-lg bg-primary text-white">
        <i class="far fa-grin-beam font-size-30"></i>
      </span>
      <div class="media-body ml-4">
        <h4 class="counter mb-0" data-to="1024">1204</h4>
        <p>
          Happy Customers
        </p>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-sm-6 mt-5">
    <div class="media">
      <span class="iconbox iconbox-lg bg-success text-white">
        <i class="far fa-file-code font-size-28"></i>
      </span>
      <div class="media-body ml-4">
        <h4 class="mb-0">
          <span class="counter" data-to="487" data-speed="5000"></span>k
        </h4>
        <p>
          Line of code
        </p>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-sm-6 mt-5">
    <div class="media">
      <span class="iconbox iconbox-lg bg-info text-white">
        <i class="fas fa-money-check-alt font-size-24"></i>
      </span>
      <div class="media-body ml-4">
        <h4 class="mb-0">
          <span class="counter" data-to="5409"></span>
        </h4>
        <p>
          Projects Done
        </p>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-sm-6 mt-5">
    <div class="media">
      <span class="iconbox iconbox-lg bg-warning text-white">
        <i class="fas fa-terminal font-size-24"></i>
      </span>
      <div class="media-body ml-4">
        <h4 class="mb-0">
          <span class="counter" data-to="1780"></span>
        </h4>
        <p>
          Deploy Package
        </p>
      </div>
    </div>
  </div>

</div>
</div>