Easy Customizable Counter In Vanilla JavaScript

Category: Javascript | February 23, 2021
Author:YunisDEV
Views Total:852 views
Official Page:Go to website
Last Update:February 23, 2021
License:MIT

Preview:

Easy Customizable Counter In Vanilla JavaScript

Description:

An easy and tiny counter JavaScript library that can be used to count up or count down to a given number.

How to use it:

1. Import the vanilla-counter.js JavaScript library into your HTML document.

<script src="vanilla-counter.js"></script>

2. Create a counter that counts from zero to your desired number.

<span data-vanilla-counter 
       data-start-at="0"
       data-end-at="100">
       {}
 </span>

3. Create a counter that counts down from a given number.

<span data-vanilla-counter 
      data-start-at="100" 
      data-end-at="0">
      {}
</span>

4. Add a prefix or suffix to the counter.

<span data-vanilla-counter 
      data-start-at="0" 
      data-end-at="100"
      data-format="{}%">
      {}
</span>

5. Determine the time to wait before starting the counter.

<span data-vanilla-counter 
      data-start-at="0" 
      data-end-at="100"
      data-delay="1000">
      {}
</span>

6. Determine the duration in milliseconds.

<span data-vanilla-counter 
      data-start-at="0" 
      data-end-at="100"
      data-time="1000">
      {}
</span>

7. Initialize the counter and done.

VanillaCounter();

You Might Be Interested In:


Leave a Reply