Stylish Incremental Counter Plugin with jQuery

Incremental Counter is jQuery plugin used for creating a stylish increasing counter that counts up from zero to the number you specify in a DOM element. The animation speed will auto update depending on the remaining numbers.

Basic usage:

1. Add the latest version of jQuery library and the jQuery incremental counter plugin to the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.incremental-counter.js"></script>

2. Specify the number you want to count up to using the data-value attribute.

<div class="incremental-counter" data-value="2000"></div>

3. Style the counter with your own CSS styles.

.incremental-counter .num {
  background: #f8f8f8 none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #00aae6;
  display: inline-block;
  height: 64px;
  line-height: 62px;
  margin: 0 4.5px;
  position: relative;
  text-align: center;
  top: -1px;
  width: 50px;
  font-size: 45px;
  font-size: 3.72625em;
  font-weight: 700;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.incremental-counter .num::before {
  background: #00aae6;
  content: "";
  display: block;
  height: 1px;
  left: -1px;
  margin: -0.5px 0 0;
  position: absolute;
  right: -1px;
  top: 50%;
  width: auto;
}

4. Active the counter on page load.

$(".incremental-counter").incrementalCounter();

5. Config the length of the number.

$(".incremental-counter").incrementalCounter({
  "digits": 4
});

Change log:

2017-05-20

• add digits options and auto digits value

2015-12-30

• add digits options and auto digits value

---

This awesome jQuery plugin is developed by MikhaelGerbet. For more Advanced Usages, please check the demo page or visit the official website.