Press "Enter" to skip to content

Number Animated Counter with Vanilla JavaScript

Animated counter with the javascript library for the animated counter to move count to a specific number.

pure css number counter animation, number counter animation javascript, animated number counter from zero to value, number counter animation generator, rolling number counter

How to make use of it:

1. Add the CSS class counter to the container which holds the preliminary value, after which specify the quantity to which the counter counts up within the data-target attribute:

<div class="counter" data-target="300000">1000</div>
<div class="counter" data-target="200000">0</div>

2. Apply the counter animation to the component and accomplished it.

// Selector
const counters = document.querySelectorAll('.counter');
// Main function
for(let n of counters) {
  const updateCount = () => {
    const target = + n.getAttribute('data-target');
    const count = + n.innerText;
    const speed = 5000; // change animation speed here
    const inc = target / speed; 
    if(count < target) {
      n.innerText = Math.ceil(count + inc);
      setTimeout(updateCount, 1);
    } else {
      n.innerText = target;
    }
  }
  updateCount();
}

Number Countup Animation, animated-counter Plugin/Github, number counter css, animated number counter online, jquery number counter animation on scroll


See Demo And Download

Official Website(lukaofirst): Click Here

This superior jQuery/javascript plugin is developed by lukaofirst. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *